6

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Alex
  • 642
  • 1
  • 9
  • 23

1 Answers1

10

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 ;)

sjahan
  • 5,720
  • 3
  • 19
  • 42
  • Thank you so much. I had already tried this, but thinking back I must have accidentally started my indexes at 0 instead of 1. – Alex Nov 08 '17 at 13:37