css

css-grid

cross-browser

What's the browser support situation regarding CSS Grid?

I'm looking around and having hard time understanding the whole picture about compatibility.

If I go to Can I Use, it seems almost all browsers support it. But if I go to Microsoft documentation, the situation changes a bit.

It seems that almost all browsers support Grid but, except for Firefox, none of them support all the features.

Then, regarding Edge, I got that it only supports an old specification no longer used and the updated one is currently in progress.

Solution 1

Browser Support for CSS Grid

  • Chrome - full support as of March 8, 2017 (version 57)
  • Firefox - full support as of March 6, 2017 (version 52)
  • Safari - full support as of March 26, 2017 (version 10.1)
  • Edge - full support as of October 16, 2017 (version 16)
  • IE11 - no support for current spec; supports obsolete version
  • IE10 - no support for current spec; supports obsolete version

Here's the complete picture: http://caniuse.com/#search=grid (click on "Show all" for more details)

Solution 2

Chrome, Edge and likely other Chromium-based browsers do not fully support grid and flex layouts! Basic support for grid and flex in fieldsets was added in Chromium 86 (August 2020), but it still doesn't work when printing it.

See https://bugs.chromium.org/p/chromium/issues/detail?id=1298079. And here are workarounds: Why can't <fieldset> be flex containers?