You can see the approaching green. CSS Grid is coming to browsers, unprefixed and out from behind flags this year. This post is a round-up of questions I keep being asked about browser support and grid layout.
Where can I find the latest information on grid browser support?
This blog post will quickly be out of date. I keep a page over on my Grid by Example site, which I try to keep as up to date as I can. It includes links to browser bug trackers and intent to ship / implement notifications.
Won’t grid be really buggy at first? Surely it is too new to use?
Flexbox early adopters will remember major difference in browser implementations – even between two versions of the same browser. People are understandably worried about a similar situation with Grid Layout.
This isn’t the case. Grid Layout has been developed as a specification, and also in browser implementations over a 5 year period at this point. The implementations in Chrome, Firefox and Safari all follow the specification, which has been developed as those implementations have been put in place with feedback from the browser implementors. Major changes have happened in the spec during that time, but as this all happened behind browser flags there was no impact on production code.
So the shiny new Grid Layout you will get in browsers, is a pretty mature piece of work at this point. Would you consider any other five year old piece of software too new to use?
Do we know when Safari will have Grid?
The Safari Technology Preview has Grid Layout support, roughly comparable to that in Chrome as it has been implemented by the same developers. However Apple do not tend to let us know what will be in a release, or when the release will be.
It may be that Grid is included in a March release. That would be the best scenario. A somewhat more pessimistic view would make it October based on past schedules. I think that the fact it is in Preview makes Grid in Safari in 2017 pretty likely by my guess, but it is a guess!
Can I Use says Grid is in Edge – how does that compare to the other browsers?
The version of Grid Layout currently in Edge is the same as the implementation of Grid in IE10 and 11. This was the original version of the specification that was developed by Microsoft.
I have written about the differences between the specifications and whether it makes sense to try and use the prefixed IE/Edge version for backwards compatibility. TL:DR “it depends” but take a look at Should I try to use the IE implementation of Grid Layout if you want to know the details.
You can track the status of Edge updating to the current specification.
Will Internet Explorer 11 get the new Grid specification?
No, IE11 will be frozen in time with the IE10 version of Grid.
So we can’t use Grid because of IE / Edge!
Only if you are under the assumption that websites have to look the same in all browsers and on all devices. If not being able to have the exact same layout across all browsers is a complete showstopper for you then perhaps it is too early to use Grid. However it will also be too early for you to use a huge number of other new browser features. I hope you are able to play and experiment in your own time, as there is a lot of fun stuff out there!
Even if it is too early to use Grid for your entire layout, it is possible to use a better supported method for main layout structures and then use Grid to finesse UI components that can also be displayed in a similar way for non-supporting browsers. I think one of the initial issues people have with using Grid is being unable to see past “main layout” as the use case. I’m more interested in the possibilities for layout of small and fiddly UI components, and it is often in these places you can start to use the spec earlier.
Can we detect IE and do something else?
Don’t try and detect IE, instead test for Grid Support using Feature Queries. You can test for support of the new specification by testing for display: grid, and you will get the current Edge implementation by testing for display: -ms-grid. IE10 and 11 don’t have Feature Query support.
Should I polyfill Grid?
I wouldn’t. If your layout is complex enough to need polyfilling to get a decent end result in non-supporting browsers it is likely that using the polyfill will have a negative effect in terms of performance and user experience.
Grid plays very nicely as an enhancement on top of older methods of layout. Use Feature Queries and enhance a simpler layout, allow browsers to grow into your design as Grid Support lands in them.
Is everything from the Level 1 specification included by browsers?
Most things are included and interoperable (working in the same way across browser implementations). The big omission is subgrid support.
I have more Grid Questions!
Ask them at my CSS Grid Layout AMA on GitHub, and I’ll try to answer them.