Как заставить этот простой макет CSS-сетки работать в IE11 - PullRequest
Новая
       9

Как заставить этот простой макет CSS-сетки работать в IE11

0 голосов
/ 01 декабря 2018

Я создаю прототип для простой трёхпанельной слайд-штуки.На второй панели я хотел бы использовать css-grid, чтобы иметь простой способ разделить панель на 4 равных и отзывчивых области, 100% высоты контейнера.

Вот демонстрационная версия:

http://jsfiddle.net/stratboy/obnkc2x5/1/

Часть кода: 

<div class="sub-grid-container">
  <div class="sub-grid-item">sub 1</div>
  <div class="sub-grid-item">sub 2</div>
  <div class="sub-grid-item">sub 3</div>
  <div class="sub-grid-item">sub 4</div>
</div>

И соответствующий CSS: 

.sub-grid-container{
  display:grid;
  height: 100%;

  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  background-color: red;
}

ПРИМЕЧАНИЕ. Я также использую Autoprefixer, и он компилируетсятакие вещи: 

.sub-grid-container {
  display: -ms-grid;
  display: grid;
  height: 100%;
  -ms-grid-columns: 50% 50%;
      grid-template-columns: 50% 50%;
  -ms-grid-rows: 50% 50%;
      grid-template-rows: 50% 50%;
  background-color: red; }

Весь код работает везде, кроме IE11.В IE11 у меня перекрыты 4 ячейки сетки, и контейнер не имеет ни 100% высоты, ни 100% ширины.

Я совершенно новичок в сетке CSS, но я думаю, что делаю что-то действительноосновные .. что я делаю не так?Или, может быть, это невозможно сделать с IE11?

1 Ответ

0 голосов
/ 01 декабря 2018

Хорошо, я справился с этим, и он работает вместе с помощью autoprefixer.По сути, в IE11 вы должны указать, где ячейки начинаются и заканчиваются реквизитами grid-row и grid-column.Кроме того, чтобы все это работало с Autoprefixer, вы должны добавить grid-template prop и не использовать одиночные операторы grid-template-columns / row (это последнее, потому что в противном случае autoprefixer не будет писать -ms-grid- ячейкиреквизиты строк / столбцов): 

.sub-grid-container {
  display: grid;
  height: 100%;
  // grid-template-columns: 50% 50%; // do not
  // grid-template-rows: 50% 50%; // do not
  grid-template:
    "a   b" 1fr
    "c   d" 1fr /
    1fr  1fr; // you can use fr units instead %
}

.cell-1 {
  grid-area: a;
}

.cell-2 {
  grid-area: b;
}

.cell-3 {
  grid-area: c;
}

.cell-4 {
  grid-area: d;
}

Результат с автоматическим префиксом будет примерно таким: 

.sub-grid-container {
  display: -ms-grid;
  display: grid;
  height: 100%;
  -ms-grid-rows: 1fr 1fr;
  -ms-grid-columns: 1fr 1fr;
      grid-template: "a   b" 1fr "c   d" 1fr / 1fr  1fr;

}

.cell-1 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: a;
}

.cell-2 {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: b;
}

.cell-3 {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: c;
}

.cell-4 {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: d;
}
...