Should I try to use the IE implementation of CSS Grid Layout?

This blog post started life as an answer to a question posted over at my CSS Grid AMA. This original question being,

“With Blink and Gecko implementations shipping early 2017, with WebKit implementation probably shipping in the fall 2017, it seems the 4 major web engines will support grids. Is the 2011 Internet Explorer implementation supporting the same feature set? And will it be possible to just convert the 2016 syntax into 2011 syntax with something like Autoprefixer?”

A very good question, and one with a less than straightforward answer. As always, it depends. Here is why.

The IE10 Implementation

The Grid implementation that is in IE10, IE11 and current Edge is an implementation based on the 2011 specification for CSS Grid Layout. This early version of Grid Layout exposed the core concepts that are part of the Candidate Recommendation, however in the five years that have passed many additions and changes have been made.

This means that when Grid ships in Chrome, Firefox and hopefully Safari in 2017, the version of Grid in those browsers – being based on the up to date specification – will be very different to that which is in Internet Explorer and Edge.

The question is, should we treat IE10, IE11 and Edge as if they have no Grid Layout support or should we try and support them with their version of Grid until such time as Edge updates to the current spec? As with pretty much everything, how far you want to go with this is going to depend on the type of site you are building and the browsers you tend to see on your site. Here are some thoughts to help you make that decision.

Specification Properties and Values

Here is a table detailing the properties in the spec at CR, the IE10 properties and also whether they are prefixed by Autoprefixer as tested using the online Autoprefixer tool.

CR Level 1 Property IE10 Implementation Autoprefixer Note
grid-template-columns -ms-grid-columns Yes
grid-template-rows -ms-grid-rows Yes
grid-template-areas No
grid-template No Shorthand
grid-auto-columns No
grid-auto-rows No
grid-auto-flow No
grid No Shorthand
grid-row-start -ms-grid-row Yes
grid-column-start -ms-grid-column Yes
grid-row-end No Defined by the -ms-grid-row-span property
grid-column-end No Defined by the -ms-grid-column-span property
grid-row Yes (only for start value) Shorthand for setting start and end values together
grid-column Yes (only for start value) Shorthand for setting start and end values together
grid-area No
grid-row-gap No Gap properties can be faked by using a regular track.
grid-column-gap No
grid-gap No
-ms-grid-column-span Not required due to changes to spec
-ms-grid-row-span Not required due to changes to spec
align-self -ms-grid-column-align Yes Now part of Box Alignment
justify-self -ms-grid-row-align No Now part of Box Alignment

This isn’t a complete list of all changes to the specification. Many values have changed and new things added too. For example the syntax for repeating track listings, the additional of values such as span 2 for grid-column-end and grid-row-end. However it is a reasonable demonstration of the fact that using the IE10 version of Grid for fallbacks is complicated.

Can Autoprefixer fix this for us?

We’re used to being able to deal with prefixed versions of specifications by adding the unprefixed property after the prefixed one. Autoprefixer essentially automates this job for us, and has support for the -ms-grid properties. However, even where similar properties exist in the two versions of the specification, the capabilities of the older spec and implementation are very different to the new one. This means you can’t simply run Autoprefixer and consider the job done.

Different behaviour of similar properties

In IE10 you don’t specify a start and end line, you specify a start line, and then detail how many columns or rows the area spans. This defines the end line. So rather than:

grid-column: 1 / 3;

We have to say:

-ms-grid-column: 1;
-ms-grid-column-span: 2;

The following CodePen example demonstrates this.

Alignment:

We have some alignment capability in the 2012 specification and IE implementation. However it doesn’t implement the properties from Box Alignment that are now used for alignment in Grid Layout. Instead we can align items by using the grid-row-align and grid-column-align properties.

These have to be applied to the items – there is no concept of setting the alignment of grid item. The -ms-grid-row-align property is on a basic level equivalent to align-self and takes the same values, -ms-grid-column-align is like using justify-self.

You can see this in action in the next CodePen.

See the Pen Grid CR vs. IE10 3: Alignment by rachelandrew (@rachelandrew) on CodePen.

Major things that don’t exist in IE

In addition to things that behave differently, we have functionality that was never implemented for IE, or has been added to the spec since the version that was implemented against. This isn’t an exhaustive list but some of the major things missing are as follows.

Auto-placement

There is no auto-placement behaviour in IE10 implementation. This means that you need to position everything rather than use the autoplacement ability of grid.

If you don’t position items they will stack up in the first cell of the grid. Compare the CodePen below with the little code needed for Example 1 at Grid by Example.

See the Pen Grid CR vs. IE10 1: defining the grid by rachelandrew (@rachelandrew) on CodePen.

Gutters

The grid-column-gap, grid-row-gap and grid-gap properties were added later. To create gaps in IE Grid you will need to create a track for the gutter and then position items taking it into account.

Layout with grid-template-areas

This was part of the 2011 specification but didn’t make it into the IE implementation. So this means there is no easy way to map properties such as grid-area, used to define a name for areas and grid-template-areas, used to define the layout in CSS.

Does it make sense to use the IE version at all?

If you are using Grid in a very simple way, and positioning items rather than using auto-placement then the fact that grid exists in Internet Explorer from version 10 could turn out very useful. You could certainly use this in order to create a simpler layout for IE10 and up, once Grid is shipped in other browsers.

However be aware that this is going to require some additional testing and work, you are unlikely to be able to simply rely on Autoprefixer to run and do the work for you. For example, if you have used auto placement for any item and then don’t set a position using the -ms properties, that item is going to stack up with any other unpositioned items in the first grid cell.

The good news is that the IE implementation is pretty much frozen in time between IE10, 11 and current versions of Edge (presumably until Edge updates to the new specification). So work you do to implement grid in IE should work in those versions without needing to do different things for different IEs.

Use Feature Queries

The IE implementation is prefixed so if you use CSS Feature Queries and check for display: grid the CSS inside the feature query will not be run by an Edge browser that supports the old prefixed version AND feature queries. So if you need to do additional work for your legacy Grid version, you can overwrite that inside your feature queries.

Once Edge does ship their new implementation, that will presumably be unprefixed. If you have tested for display: grid unprefixed it will be able to use the new implementation without you changing your code.

And about Edge shipping their implementation

If you want Edge to support new Grid, make sure Microsoft know that you want it. You can upvote the feature here, that’s a quick thing you can do to ask Microsoft to close the loop. Ask them to build on the great work they did to give us Grid Layout the first place, by bringing their implementation to meet the revised spec now at Candidate Recommendation. This link is where to keep track of Edge implementation status.

Further examples

I’ve been writing about grid for a long time so have articles about the IE10 version of Grid Layout.

You can also check out these resources from Microsoft:

I’ve covered a fair bit of ground here and I’ve not spent a huge amount of time building things using the IE implementation, since the specification was updated. So, if anyone spots anything wrong or that could be usefully added let me know!

133 Comments

Anthony Ricaud November 26, 2016 Reply

Thank you very much for this very thorough answer!

It seems like it will rarely be worth the effort for teams that have to support Windows 7 and 8. Which will be most teams for a while. Too bad…

Andrey Sitnik November 29, 2016 Reply

Autoprefixer also has grid: false option to disable ms prefixes for Grid Layout.

Also it is big question, could we implement grid-template-areas in ms. As I saw, it is just syntax sugar and we could calculate position and put it by old properties. But I need some help to implement it in Autoprefixer.

Paul Shryock October 19, 2017 Reply

Explaining a technique for full width elements in constrained columns with CSS Grid #devfestnantes buff.ly/2gQy40V

Leandra Tomaine October 19, 2017 Reply

CSS Grid fallbacks and overrides cheatsheet #devfestnantes buff.ly/2xQohCx

Jordan Mor October 19, 2017 Reply

CSS Grid fallbacks and overrides cheatsheet #devfestnantes buff.ly/2xQohCx

Jackie D'Elia October 20, 2017 Reply

It is possible to use the IE10/11 version of grid layout as a fallback, more here #devfestnantes buff.ly/2yyPg40

Hardik Joshi October 28, 2017 Reply

It is possible to use the IE10/11 version of grid layout as a fallback, more here #viewsource buff.ly/2gNehT2

Peter October 28, 2017 Reply

It is possible to use the IE10/11 version of grid layout as a fallback, more here #viewsource buff.ly/2gNehT2

Bernhard Gschwantner October 30, 2017 Reply

Grid fallbacks and overrides cheatsheet buff.ly/2A1mZ56 #AEASF

Oluwaseun Paul October 30, 2017 Reply

Why you probably don’t need a CSS Grid-based grid system #AEASF buff.ly/2xABtam

markus staab October 30, 2017 Reply

A post about using the IE10 and IE11 version of Grid Layout. What works and what doesn’t. buff.ly/2yYUTJO #AEASF

Emily Rapport October 31, 2017 Reply

A post about using the IE10 and IE11 version of Grid Layout. What works and what doesn’t. buff.ly/2yYUTJO #AEASF

Non-spooky guy October 31, 2017 Reply

Why you probably don’t need a CSS Grid-based grid system #AEASF buff.ly/2xABtam

Vinci the Cat ☂ October 31, 2017 Reply

Grid fallbacks and overrides cheatsheet buff.ly/2A1mZ56 #AEASF

Justin Fagnani October 31, 2017 Reply

A post about using the IE10 and IE11 version of Grid Layout. What works and what doesn’t. buff.ly/2yYUTJO #AEASF

Yasumasa Ashida October 31, 2017 Reply

A post about using the IE10 and IE11 version of Grid Layout. What works and what doesn’t. buff.ly/2yYUTJO #AEASF

Pierre-yves Baloche October 31, 2017 Reply

Why you probably don’t need a CSS Grid-based grid system #AEASF buff.ly/2xABtam

Naftali Friedman October 31, 2017 Reply

Why you probably don’t need a CSS Grid-based grid system #AEASF buff.ly/2xABtam

Grégoire Noyelle October 31, 2017 Reply

A post about using the IE10 and IE11 version of Grid Layout. What works and what doesn’t. buff.ly/2yYUTJO #AEASF

John Matthews October 31, 2017 Reply

Grid fallbacks and overrides cheatsheet buff.ly/2A1mZ56 #AEASF

Ricardo Machado October 31, 2017 Reply

A post about using the IE10 and IE11 version of Grid Layout. What works and what doesn’t. buff.ly/2yYUTJO #AEASF

Shidhin October 31, 2017 Reply

A post about using the IE10 and IE11 version of Grid Layout. What works and what doesn’t. buff.ly/2yYUTJO #AEASF

W3Design.mobi October 31, 2017 Reply

Why you probably don’t need a CSS Grid-based grid system #AEASF buff.ly/2xABtam

Leave a Reply