By rolfo85


2017-09-05 16:55:48 8 Comments

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.

1 comments

@Michael_B 2017-09-05 17:58:07

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)

@rolfo85 2017-09-05 18:25:49

Thanks, I can't get what the summary is about though (caniuse.com/#search=grid). Cause it's all yellow with 50% on all browsers except for Firefox.

@TylerH 2017-09-05 18:30:47

@rolfo85 Focus on the first table, not the summary. The summary is including support for both css grid and the display: contents property combined.

@Philipp Schmid 2019-08-08 13:12:43

-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.

@Michael_B 2019-08-08 13:53:36

@PhilippSchmid, you're mixing apples and oranges. My answer is correct: Major browsers provide full support for CSS 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.

Related Questions

Sponsored Content

18 Answered Questions

[SOLVED] Get the size of the screen, current web page and browser window

31 Answered Questions

[SOLVED] Is there a CSS parent selector?

  • 2009-06-18 19:59:36
  • jcuenod
  • 1899857 View
  • 3042 Score
  • 31 Answer
  • Tags:   css css-selectors

47 Answered Questions

[SOLVED] How can I transition height: 0; to height: auto; using CSS?

  • 2010-08-18 02:50:35
  • Hailwood
  • 977556 View
  • 2033 Score
  • 47 Answer
  • Tags:   css css-transitions

19 Answered Questions

[SOLVED] How do CSS triangles work?

36 Answered Questions

[SOLVED] Change an HTML5 input's placeholder color with CSS

45 Answered Questions

[SOLVED] How to vertically center a div for all browsers?

27 Answered Questions

[SOLVED] Set cellpadding and cellspacing in CSS?

38 Answered Questions

[SOLVED] How to align checkboxes and their labels consistently cross-browsers

19 Answered Questions

[SOLVED] Is it possible to apply CSS to half of a character?

  • 2014-05-09 16:16:57
  • Mathew MacLean
  • 237782 View
  • 2749 Score
  • 19 Answer
  • Tags:   javascript html css

Sponsored Content