CSS Grid not workiing on IE11 or Edge even with -ms prefix [duplicate]

Question

I've been following the guide here on getting grids working on IE 11. My problem is that even following those rules, the columns and rows just overlap each other rather than taking their grid positions.

Here's a simple code example that would cause the problem:

HTML

<div class="grid">
  <div>Top Left</div>
  <div>Top Right</div>
  <div>Bottom Left</div>
  <div>Bottom Right</div>
</div>

CSS

.grid {
  display: -ms-grid;
  -ms-grid-columns: 200px 200px;
  -ms-grid-rows: 200px 200px;
}

And here's a codepen link to it:

https://codepen.io/anon/pen/pdNWMj

Am I getting this code wrong, or should I be using something other than the ms implementation of grid?

Answer 1

You must use -ms-grid-column and -ms-grid-row to specify for each child where it is in the grid.

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 200px 200px;
  -ms-grid-rows: 200px 200px;
  grid-template-columns: 200px 200px;
  grid-template-rows: 200px 200px;
}

.top-left {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}

.top-right {
  -ms-grid-column: 2;
  -ms-grid-row: 1;
}

.bottom-left {
  -ms-grid-column: 1;
  -ms-grid-row: 2;
}

.bottom-right {
  -ms-grid-column: 2;
  -ms-grid-row: 2;
}

<div class="grid">
  <div class="top-left">Top Left</div>
  <div class="top-right">Top Right</div>
  <div class="bottom-left">Bottom Left</div>
  <div class="bottom-right">Bottom Right</div>
</div>

https://codepen.io/anon/pen/ZaBaVa

Not as convenient as the other browsers... Hoping this helps though ;)