14

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.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
rolfo85
  • 717
  • 3
  • 11
  • 27
  • All modules are subject to revision as needed. When a module reaches the `Candidate Recommendation` status (as opposed to `Working Draft`, `Editors Draft`, etc.), that means *that version of the module* is finalized and ready for browsers to implement, and any changes will be added to later versions. – TylerH Sep 05 '17 at 18:14
  • Thanks, so is the current release the final one? or as for the Edge, it might be that in 2 years the current properties will no longer be supported? – rolfo85 Sep 05 '17 at 18:20
  • It's unlikely that major modules like this would be *scrapped* from browsers. See Michael's answer below for details on which browsers support the Grid layout module (implementation bugs notwithstanding). – TylerH Sep 05 '17 at 18:21
  • 3
    Browser support is not an opinion. Vote for reopen. –  Mar 23 '19 at 15:26

2 Answers2

15

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)

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Thanks, I can't get what the summary is about though (http://caniuse.com/#search=grid). Cause it's all yellow with 50% on all browsers except for Firefox. – rolfo85 Sep 05 '17 at 18:25
  • 1
    @rolfo85 Focus on the first table, not the summary. The summary is including support for both css grid and the `display: contents` property combined. – TylerH Sep 05 '17 at 18:30
  • -1 Chrome still doesn't support animations of `grid-template-rows`/`grid-template-columns` in mid 2019 and Firefox didn't when this answer was written (they support it since version 66). The answer might be correct somewhere in the future but currently, it is not. – CookedCthulhu Aug 08 '19 at 13:12
  • @PhilippSchmid, you're mixing apples and oranges. My answer is correct: [Major browsers provide full support for CSS Grid](https://caniuse.com/#search=grid). It's *animations* that aren't supported in combination with CSS Grid. That's a different story. There are plenty of cases where one CSS module isn't fully integrated with another module, yet each module is independently supported by the browser. In short, full browser support doesn't mean full support of all CSS modules. – Michael Benjamin Aug 08 '19 at 13:53
-1

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?

M-Michael
  • 1
  • 1
  • 2