Browser Support for CSS Grid Layout

This article shows you how to start using grid now, while still supporting older browsers.

Until March 2017, browser support for grid layout was virtually non-existent. Internet Explorer and Edge were the only browsers with grid support, but even then it was only with the -ms- prefix. Plus, support was actually for an older version of the spec (things have changed quite a lot since that older spec).

Actually, Firefox, Chrome and Opera also supported grid, but only from behind a flag (layout.css.grid.enabled in Firefox, and by enablying experimental Web Platform features under chrome://flags in Chrome and Opera).

However, March 2017 was a very significant month for CSS grid layout. Grid support was almost simultaneously rolled out in at least six of the major browsers. This type of synchronized rollout of a new feature has rarely (if ever) happened before with browsers. I think this tells us that grid layout won't be disappearing any time soon!

Here's a breakdown of the current situation from Caniuse.com:

So the good news is that most major browsers now support grid.

The bad news is that there are still plenty of people using browsers that don't support grid. So these users won't be able to view your wonderful new grid layout.

The other good news is that they'll catch up — eventually.

But until then, if you want to use grid in your production sites, you should probably use a failover, so that non-grid browsers can still view your website as you intended (or close to).

Testing for Grid with Feature Queries

The best way to use grid while supporting older browsers is to use feature queries. This is where you use the supports at-rule to test whether or not the browser supports grid. If it does, then use the grid layout, otherwise the browser will see a layout built using older techniques (like floats, or... dare I say it... tables!).

The supports rule works like this:

That code is quite self-explanatory. I simply provided the property: value declaration that I want to test for. If the browser supports the given declaration, then it will run the code between the curly brackets. If not, it will skip it entirely.

So, to make this work, you need to specify the failover code before the supports rule. Like this:

That way, you set up all browsers with the old code, then run the grid code from within the supports rule.

So if a browser doesn't support grid, it will skip that code and continue to use the old code.

If a browser doesn't support feature queries, it will skip the whole supports rule, and therefore, it will use the old code.

Supporting Microsoft Edge

You can include multiple "features" to cater for browsers that only support grid with a browser extension.

Microsoft Edge and Internet Explorer currently support grid under the -ms- extension, so you could change the above code to this:

However, there are a couple of caveats.

Firstly, Internet Explorer supports grid but it doesn't support feature queries. Therefore, it will skip the whole feature query and use the failover code anyway.

Secondly, both of these browsers support an older version of the grid specification. Therefore, you will need to ensure that any grid code you write works properly in these browsers. In this case, you could create a separate feature query for "standards" grid, and another for "ms" grid. Like this: