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-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-row-gap||-||No||Gap properties can be faked by using a regular track.|
|-||-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-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.
See the Pen Grid CR vs. IE10 2: Line-based placement spanning cells by rachelandrew (@rachelandrew) on CodePen.
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
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
You can see this in action in the next 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.
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.
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.
I’ve been writing about grid for a long time so have articles about the IE10 version of Grid Layout.
- Giving Content Priority with CSS Grid Layout – from 2012 on 24 Ways
- CSS Grid Layout, what has changed – an explanation of changes from the IE version dated April 2013, many of these things changed again since
- Three Years with Grid Layout – my thoughts a year ago after spending 3 years working with the spec
You can also check out these resources from Microsoft:
- Internet Explorer 10 Developer Guide – Grid Layout
- IE10 Platform Preview and CSS Features for Adaptive Layouts
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!