This site runs best with JavaScript enabled.

Using CSS Grid in IE11

Photo by Asher Ward


How to use IE11 compatible CSS Grid.

CSS Grid

Most web apps use a grid system to control their layouts. A grid system is a way of splitting a web page into a set of columns, usually 12 and using that as the base of your page layout. This pattern is so common that it became standardized as CSS Grid Layout.

Browser Compatibility and Autoprefixer

NOTE: In order to simplify this discussion I'll use the css-in-js library emotion as our working example of what supporting CSS Grid looks like.

Many modern CSS features are initially supported through vendor prefixes to account for differences in browser implementations during early adoption of a feature. Emotion automatically adds vendor prefixes through the use of stylis's autoprefixer plugin. This allows us to use things like flexbox without thinking about browser differences. Unfortunately after a year of research the maintainers of stylis determined that CSS Grid was not a feature they would be supporting with their autoprefixer plugin. Here's the TL;DR on the issue.

Maintainers here don't plan on working on this as it's just not that simple of a task and any attempts to autoprefix grid for IE11 have their edge cases. It's also a matter of "least surprise principle" - if we can't make it work for all cases, we don't want to make it at all because one could think they can use every grid-related feature safely when that would just not be true.

Andarist

problems with autoprefixing CSS Grid

Lets look at the following table to analyze the differences between the current implementation of CSS Grid and IE11's implementation.

CSS Grid PropertiesIE11 Implementation
grid-template-columns-ms-grid-columns
grid-template-rows-ms-grid-rows
grid-template-areasN/A
grid-templateN/A
grid-auto-columnsN/A
grid-auto-rowsN/A
grid-auto-flowN/A
gridN/A
grid-row-start-ms-grid-row
grid-column-start-ms-grid-column
grid-row-endN/A
grid-column-endN/A
grid-columnN/A
grid-areaN/A
grid-row-gapN/A
grid-column-gapN/A
grid-gapN/A
N/A-ms-grid-column-span
N/A-ms-grid-row-span
align-self-ms-grid-row-align
justify-self-ms-grid-column-align

As you can see there aren't a lot of cross over between how properties map to each other. Another big problem is that one of the major benefits to CSS grid is that you can define spaces between columns with grid-gap. In IE they don't have any support for this ability. 👎

Manual Prefixing

Given the difficulties with automating the vendor prefixes if you need to support IE11 then you will need to manually add vendor prefixes. These are the strategies I employ when doing so in order to simplify things and make my life easier.

Make heavy use of grid templates

I've seen two styles of writing css grid. The first would look something like this:

1.container {
2 display: grid;
3 grid-template-columns: 1fr 10px repeat(3, 1fr);
4 grid-template-rows: 100px 10px 100px;
5 grid-template-areas:
6 'a'
7 'b b b'
8 'c c';
9}
10
11.a {
12 grid-area: a;
13}
14
15.b {
16 grid-area: b;
17}
18
19.c {
20 grid-area: c;
21}

The second looks like this:

1.container {
2 display: grid;
3 grid-template-columns: 1fr 10px repeat(3, 1fr);
4 grid-template-rows: 100px 10px 100px;
5}
6
7.a {
8 grid-column: 1;
9 grid-row: 1;
10}
11
12.b {
13 grid-column: 1/3;
14 grid-row: 2;
15}
16
17.c {
18 grid-column: 1/2;
19 rid-row: 3;
20}

Although the first is really nice for readability and has the nice benefit of controlling all layout in the parent container I wouldn't use it if you are worried about IE. IE doesn't support this named syntax you have to declare the layout via -ms-grid-row/column-span and -ms-grid-row/column and using the numbering syntax across the board keeps things as similar as possible across browsers.

Using the second syntax we could write cross browser compatible css that would look like this:

1.container {
2 display: grid;
3 display: -ms-grid;
4 grid-template-columns: 1fr 10px repeat(3, 1fr);
5 grid-template-rows: 100px 10px 100px;
6}
7
8.a {
9 -ms-grid-column: 1;
10 -ms-grid-row: 1;
11 grid-column: 1;
12 grid-row: 1;
13}
14
15.b {
16 -ms-grid-column: 1;
17 -ms-grid-column-span: 3;
18 -ms-grid-row: 2;
19 grid-column: 1/3;
20 grid-row: 2;
21}
22
23.c {
24 -ms-grid-column: 1;
25 -ms-grid-column-span: 2;
26 -ms-grid-row: 3;
27 grid-column: 1/2;
28 rid-row: 3;
29}

Don't use gaps

IE's implementation of CSS Grid doesn't support gaps between columns. You could try to simulate gaps with margin and positioning but I wouldn't recommend it. Instead I've found it much simpler to use gaps for modern browsers and use CSS Grids -ms- specific alignment properties to position the elements where you would like. Here's an example of that.

1.container {
2 display: grid;
3 display: -ms-grid;
4 grid-template-columns: 1fr 10px repeat(3, 1fr);
5 grid-template-rows: 100px 10px 100px;
6}
7
8.a {
9 -ms-grid-column: 1;
10 -ms-grid-row: 1;
11 grid-column: 1;
12 grid-row: 1;
13}
14
15.b {
16 -ms-grid-column: 1;
17 -ms-grid-column-span: 3;
18 -ms-grid-row: 2;
19 -ms-grid-column-align: center;
20 grid-column: 1/3;
21 grid-row: 2;
22}
23
24.c {
25 -ms-grid-column: 1;
26 -ms-grid-column-span: 2;
27 -ms-grid-row: 3;
28 -ms-grid-column-align: center;
29 -ms-grid-row-align: center;
30 grid-column: 1/2;
31 rid-row: 3;
32}

The Good News

By now I'm sure its obvious there are some definite downsides of using Grid in IE. Theres no sugar coating it...it sucks. They did do at least one thing right though. All utility methods are available! Thats right repeat, minmax and all your other favorite helper functions can be used in IE!

Summary

Supporting CSS Grid for Internet Explorer isn't the most developer friendly experience but by following the few recommendations I've made in this article you will make things much easier. If you have other tips you can share I'd love to hear them! Good luck!

Discuss on TwitterEdit post on GitHub

Share article
Tyler Haas

Tyler Haas is a full stack software engineer and primarily focusing on the front end. He has worked with companies of all sizes to help them deliver robust applications. He lives with his wife and three kids in Utah.