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

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.

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.

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.

• 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!