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?

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 Expert