Issue with grid layout in IE11

问题

I'm trying to create a 3cols*2rows layout using css. it works as expected in chrome but it's not working fine in ie11. can you please suggest how can i achieve it. i think the problem is with grid gap since the grid gap is not working in IE, i've tried gap, grid-row-gap but i've no luck

my code looks as follows:

.grid_container {
  width: 65%;
  margin: 10px auto;
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: 1fr 1fr 1fr;
  max-width: 1100px;
  display: -ms-grid;
  -ms-grid-columns: 1fr 1fr 1fr;             
  -ms-grid-row-gap:1.5rem;
  -ms-grid-column-gap:1.5rem;
}

.box-item {
  width: 100%;
  height: auto;
  position: relative;
  }

.box-item img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: bottom;
}

.box-text {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 400;
  color: white;
}

<div class="grid_container">
 <div class="box-item">
  <img src="https://i.picsum.photos/id/255/200/200.jpg?hmac=IYQV36UT5-F1dbK_CQXF7PDfLfwcnwKijqeBCo3yMlc" />
  <div class="box-text">
   dummy text
  </div>
 </div>
 <div class="box-item">
  <img src="https://i.picsum.photos/id/255/200/200.jpg?hmac=IYQV36UT5-F1dbK_CQXF7PDfLfwcnwKijqeBCo3yMlc" />
  <div class="box-text">
   dummy text
  </div>
 </div>
 <div class="box-item">
  <img src="https://i.picsum.photos/id/255/200/200.jpg?hmac=IYQV36UT5-F1dbK_CQXF7PDfLfwcnwKijqeBCo3yMlc" />
  <div class="box-text">
   dummy text
  </div>
 </div>
 <div class="box-item">
  <img src="https://i.picsum.photos/id/255/200/200.jpg?hmac=IYQV36UT5-F1dbK_CQXF7PDfLfwcnwKijqeBCo3yMlc" />
  <div class="box-text">
   dummy text
  </div>
 </div>
 <div class="box-item">
  <img src="https://i.picsum.photos/id/255/200/200.jpg?hmac=IYQV36UT5-F1dbK_CQXF7PDfLfwcnwKijqeBCo3yMlc" />
  <div class="box-text">
   dummy text
  </div>
 </div>
</div>

i've observed everything is getting overlapped in IE.

image

来源：https://stackoverflow.com/questions/65808164/issue-with-grid-layout-in-ie11

标签

javascript

html

css

grid

css-grid