Question: CSS Grid not workiing on IE11 or Edge even with -ms prefix

Question

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

Answers 1
Added at 2017-11-08 14:11
Tags
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?

Answers to

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

nr: #1 dodano: 2017-11-08 14:11

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

Source Show
◀ Wstecz