Supporting CSS Grid in Internet Explorer

How to Make CSS Grid Work in IE in 5 Minutes!

Intro

Most developers are afraid to start using CSS Grid because of browser support, but CSS grid is fully supported in all main browsers: Chrome, Firefox, Safari, Edge including their mobile versions.

The problem we still have, is supporting IE (Internet explorer).
What you might not know, is that CSS Grid was first supported in IE 10.

In this post I will teach you how to support CSS Grid in IE 10 and above, while using the old CSS Grid syntax, without the need to know the old prefixes of IE CSS Grid.

Disclaimer: I’ve checked it on IE 11 (I don’t have real IE 10 to check)

What isn't supported in CSS Grid in IE, and How can you Make It Work?

Grid-gap isn’t supported, but you can use CSS margin instead.
Grid-template-areas isn't supported, but we can convert it to work with grid lines.
Important: the HTML <main> tag doesn’t work with CSS grid. Replace it with <section role=”main”>.

Auto Converting CSS Grid to Support IE CSS Grid

Let’s take these CSS Grid styles that aren’t supported in IE.

CSS

.site{
  display:grid;
  grid-template-columns:2fr 1fr;
  grid-template-areas:"header header"
                      "title sidebar"
                      "main sidebar"
                      "footer footer";  
}
.site > *{padding:30px; color:#fff; font-size:20px;}.mastheader{   grid-area:header; }
.page-title{   grid-area:title; }
.main-content{ grid-area:main; }
.sidebar{      grid-area:sidebar;}
.footer{       grid-area:footer;}

CSS Grid Codepen Demo — Without IE prefixes

Using AutoPrefixer CSS Online Website

Autoprefixer is a postcss tool that reads your CSS, and either adds or removes prefixes, according to a predefined list of supported browsers. They also have an online tool you can use to add prefixes to your snippets.

Now we will copy the code, as it is, to Autoprefixer CSS online.

Notice! when converting grid-template-areas, you have to also convert grid-area along with it, because autoprefixer needs to know the connections between them.

Autoprefixer CSS online

Autoprefixer online - add the desired vendor prefixes and remove unnecessary in your CSS

autoprefixer.github.io

Result

We got CSS that is 100% IE CSS Grid compatible.
You don’t need to understand the IE syntax, the converting is doing a great job!

CSS

.site{   
   display:-ms-grid;
   display:grid;   -ms-grid-columns:2fr 1fr;
   grid-template-columns:2fr 1fr;
   grid-template-areas:"header header"
                       "title sidebar"
                       "main sidebar"
                       "footer footer";
}
.site > *{padding:30px; color:#fff; font-size:20px;} 
.mastheader{
   -ms-grid-row:1; 
   -ms-grid-column:1; 
   -ms-grid-column-span:2;
   grid-area:header;
} 
.page-title{
   -ms-grid-row:2;
   -ms-grid-column:1;
   grid-area:title;
} 
.main-content{
   -ms-grid-row:3;
   -ms-grid-column:1;
   grid-area:main;
} 
.sidebar{
   -ms-grid-row:2;
   -ms-grid-row-span:2;
   -ms-grid-column:2;
   grid-area:sidebar;
} 
.footer{
   -ms-grid-row:4;
   -ms-grid-column:1;
   -ms-grid-column-span:2;
   grid-area:footer;
}