#### About: CSS Grid for IE11
CSS Grid in IE11 is an implementation based on the [2011 spec](https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407), which means we aren't really able to use grids out of the box according to the newer spec. **However,** [Autoprefixer](https://github.com/postcss/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:**
```scss
// 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!