CSS Grid не работает в IE11 или Edge даже с префиксом -ms

Я следовал руководству здесь о том, как заставить сетки работать в IE 11. Моя проблема в том, что даже следуя этим правилам, столбцы и строки просто перекрывают друг друга, а не занимают свои позиции в сетке.

Вот простой пример кода, который может вызвать проблему:

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

И вот ссылка на codepen:

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

Я неправильно понимаю этот код, или я должен использовать что-то другое, кроме реализации сетки ms?


css css-grid microsoft-edge internet-explorer-11
person Alex    schedule 08.11.2017    source источник

Ответы (1)


arrow_upward
10
arrow_downward

Вы должны использовать -ms-grid-column и -ms-grid-row, чтобы указать для каждого дочернего элемента, где он находится в сетке.

.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

Не так удобно, как в других браузерах... Надеюсь, это поможет;)

person sjahan    schedule 08.11.2017
comment
Большое спасибо. Я уже пробовал это, но, оглядываясь назад, я, должно быть, случайно начал свои индексы с 0 вместо 1. - person Alex; 08.11.2017