Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Browser support for CSS Grid

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.

like image 333
rolfo85 Avatar asked Sep 05 '17 16:09

rolfo85


People also ask

Is CSS grid supported by all browsers?

The supporting browsers Other than in Internet Explorer, CSS Grid Layout is unprefixed in Safari, Chrome, Opera, Firefox and Edge. Support for all the properties and values detailed in these guides is interoperable across browsers.

How do I enable CSS grid in Chrome?

Note, if you do not see a Layout Pane in the Elements Panel, then you can check that CSS Grid Debugging is enabled: Open Show Experiments from the Command Menu (Cmd + Shift + P). Check the box labelled Enable new CSS Grid debugging features . Restart DevTools with the shortcut Alt + R.

Does CSS grid work in IE 11?

grid-auto-rows and grid-auto-columns are not supported, because IE11 can only create columns and rows automatically based on the size of the content it contains in the grid. So if you try to explicitly give a size with auto rows or columns, it will default to auto.

Does bootstrap support CSS grid?

How it works. With Bootstrap 5, we've added the option to enable a separate grid system that's built on CSS Grid, but with a Bootstrap twist. You still get classes you can apply on a whim to build responsive layouts, but with a different approach under the hood. CSS Grid is opt-in.


1 Answers

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)

like image 193
Michael Benjamin Avatar answered Sep 22 '22 18:09

Michael Benjamin