htmlcssinternet-explorer-11grid-layout

How to implement CSS Grid in IE11?


I have a simple Grid with two responsible images, but I need it to work in Internet Explorer 11 too. I tried to use Autoprefixer, but it didn't worked.

My live code: https://codepen.io/XTeoos/pen/QWELojR

.grid-container {
  display: grid;
  grid-template:1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:

    ". .";
}
.g1 {
     width: 100%;
     padding: 0;
     margin: 0;
}
<div class="grid-container"> 
    <img class=g1 src="1.jpg">
    <img class=g1 src="2.jpg">
</div>


Solution

  • As IE doesn't support grids well, you have to define grid columns to display the image properly. Try this

    .parent{
    display: grid;
    display: -ms-grid;
    grid-template-columns: 1fr 1fr;
    -ms-grid-columns: 1fr 1fr;
    }
    .image1{
    grid-column: 1;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    }
    .image2{
    grid-column: 2;
    -ms-grid-column: 2;
    -ms-grid-row: 1;
    }
    <div class="parent">
    <img class="image1" src="https://www.w3schools.com/howto/img_forest.jpg" alt="ex" />
    <img class="image2" src="https://www.w3schools.com/howto/img_forest.jpg" alt="ex2" />
    </div>