Supporting CSS Grid in Internet Explorer

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

Intro

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

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

Using AutoPrefixer CSS Online Website

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

Final Words

--

--

CSS & HTML Architect

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store