CSS Grid for IE11 using Autoprefixer

IE11-grid-with-autoprefixer.md

About: CSS Grid for IE11

CSS Grid in IE11 is an implementation based on the 2011 spec, which means we aren't really able to use grids out of the box according to the newer spec. However, Autoprefixer automates a lot of work for us with getting the correct IE11 properties, and it has support for most (if not all?) -ms-grid properties.

There are still some gotchas which Autoprefixer can't help with though:

• There is no auto-placement behaviour in the 2011 spec. This means that for IE11, you have to position everything. rather than use the autoplacement ability of grid.
• Using minmax() with an auto value is not supported, and will break things - e.g. minmax(auto, 1200px) will not work. To use minmax, you have to specify two positive values - e.g. minmax(500px, 1200px).
• grid-gap properties were added in a later spec. To create grid-gaps in IE11, you will need to create separate tracks for the gutter and then position items taking this into account. Example:

// Here we specify a grid with three columns, with a 1rem gutter
// Note: the same strategy applies to grid-template-rows

.grid-parent {
    grid-template-columns: 10rem 20rem 30rem;
    grid-gap: 1rem;

    // For IE11, the syntax will be:
    -ms-grid-columns: 10rem 1rem 20rem 1rem 30rem;
}

// And specify on the columns:
.column-1 {
    -ms-grid-column: 1; // actually implied, but added for clarity
}
.column-2 {
    -ms-grid-column: 3;
}
.column-3 {
    -ms-grid-column: 5;
}

Those should be the only major caveats of using grid in IE11 with Autoprefixer. If you should encounter something else, you are more than welcome to contribute!

Great tip, thanks. If you have more child elements than the number of columns specified in the parent element, it's also necessary to specify the row that each additional element will ocupy.

.column-4,
.column-5,
.column-6 {
    -ms-grid-row: 2; 
}