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

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;
}

CSS Grid CodePen Demo — With Support for IE Browsers

Final Words

That’s all,
I hope you’ve enjoyed this short post and learned from my experience.
If you like this post, I will appreciate applause and sharing :-)

More posts on CSS Grid:
CSS Grid for Beginners (Beginner level)
The CSS Grid Methods (Intermediate level)
Becoming a CSS Grid Ninja! (High level)

More posts on CSS:
New CSS Logical Properties!
The New Responsive Design Evolution
CSS Architecture for Multiple Websites With SASS

Who Am I?
I am Elad Shechter, Web Developer specializing in CSS & HTML design and architecture, working at Investing.com.

You are welcome to follow me on Twitter! :-)

You Can find me in my Facebook groups:
CSS Masters
CSS Masters Israel