CSS Grid Layout с полной высотой в IE

Я начал использовать CSS Grid Layout великой Рэйчел Эндрюс, и я не могу понять, как я могу растянуть обертку. Я использую ее первый пример из книги Get Ready for CSS Grid Layout с небольшой модификацией — полная высота.

Он отлично работает в Chrome, FF, Safari, Opera, но не заполняет всю высоту в IE. Я использую префиксы IE для системы сетки (-ms-), и все работает, но не в полную высоту.

.wrapper {
  display: grid;
  display: -ms-grid;
  grid-template-columns: 12px calc(50vw - 18px) 12px calc(25vw - 18px) 12px calc(25vw - 12px) 12px;
  -ms-grid-columns: 12px calc(50vw - 18px) 12px calc(25vw - 18px) 12px calc(25vw - 12px) 12px;
  grid-template-rows: 12px auto 12px auto 12px;
  -ms-grid-rows: 12px auto 12px auto 12px;
  background-color: #fff;
  color: #444;
  height: 100vh;
}

.box {
  background-color: rgb(120, 70, 123);
  border: 5px solid rgb(88, 55, 112);
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font: 150%/1.3 Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif;
}

.a {
  grid-column: 2 / 3;
  grid-row: 2 / 5;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  -ms-grid-row: 2;
  -ms-grid-row-span: 3;
}

.b {
  grid-column: 4 / 7;
  grid-row: 2 / 3;
  -ms-grid-column: 4;
  -ms-grid-column-span: 3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
}

.c {
  grid-column: 4 / 5;
  grid-row: 4 / 5;
  -ms-grid-column: 4;
  -ms-grid-column-span: 1;
  -ms-grid-row: 4;
  -ms-grid-row-span: 1;
}

.d {
  grid-column: 6 / 7;
  grid-row: 4 / 5;
  -ms-grid-column: 6;
  -ms-grid-column-span: 1;
  -ms-grid-row: 4;
  -ms-grid-row-span: 1;
}
<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
</div>

Также есть рабочий jsfiddle: https://jsfiddle.net/v7d641jb/

(если вы хотите проверить весь пример, его здесь http://legie.kirril.com/www/grid/index.html)


html css css-grid internet-explorer
person ondrejko    schedule 26.07.2017    source источник
comment
вы можете использовать 1fr вместо auto, чтобы полностью заполнить сетку jsfiddle.net/v7d641jb/1   -  person G-Cyrillus    schedule 26.07.2017

Ответы (1)


arrow_upward
8
arrow_downward

Хотя спецификация сетки CSS (старый, который поддерживается IE), определяет значение auto для grid-rows, очевидно, что оно не работает в IE.

Простое решение — заменить auto на 1fr.

Вместо этого:

-ms-grid-rows: 12px auto 12px auto 12px;

Попробуй это:

-ms-grid-rows: 12px 1fr 12px 1fr 12px;

пересмотренная скрипта

person Michael Benjamin    schedule 26.07.2017
comment
Ты бог среди крестьян. Благодарю вас! - person Lars Holdaas; 16.12.2019
comment
Этот! Спасибо. - person ondrejko; 20.05.2020