CSS Grid Layout не работает в IE11 даже с префиксами

Я использую следующую разметку HTML для моей сетки.

<section class="grid">
    <article class="grid-item width-2x height-2x">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item width-2x">....</article>
    <article class="grid-item height-2x">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item width-2x height-2x">....</article>
</section>

Код SCSS выглядит следующим образом:

.grid {
    display: grid;
    grid-template-columns: repeat( 4, 1fr );
    grid-gap: 30px;
    align-items: start;

    .grid-item {
        &.height-2x {
            grid-row: span 2;
        }
        &.width-2x {
            grid-column: span 2;
        }
    }
}

Поскольку я использую auto-prefixer в своем рабочем процессе, он автоматически добавляет все соответствующие свойства с префиксом -ms. Я могу подтвердить это через элемент проверки.

Теперь проблема заключается в том, что этот код отлично работает в Chrome, Firefox и Opera, но когда я открываю эту страницу в Microsoft Edge или в IE 11, все элементы сетки перекрываются друг с другом в первой ячейке. Согласно этот сайт, эти браузеры поддерживают макет CSS Grid с префиксом -ms. Я создал CodePen для этого сценария.

CodePen Link

Почему он не работает?

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr);
  -ms-grid-rows: (270px)[4];
  grid-template-rows: repeat(4, 270px);
  grid-gap: 30px;
}

.grid .grid-item {
  background-color: #000;
  color: #fff;
  text-align: center;
  line-height: 270px;
}

.grid .grid-item.height-2x {
  -ms-grid-row: span 2;
  grid-row: span 2;
}

.grid .grid-item.width-2x {
  -ms-grid-column: span 2;
  grid-column: span 2;
}
<section class="grid">
  <article class="grid-item width-2x height-2x">....</article>
  <article class="grid-item">....</article>
  <article class="grid-item">....</article>
  <article class="grid-item width-2x">....</article>
  <article class="grid-item height-2x">....</article>
  <article class="grid-item">....</article>
  <article class="grid-item">....</article>
  <article class="grid-item width-2x height-2x">....</article>
</section>

ОТВЕТЫ

Ответ 1

IE11 использует более старую версию спецификации Grid.

Используемые вами свойства не существуют в более старой спецификации сетки. Использование префиксов не имеет значения.

Вот три проблемы, которые я вижу сразу.

repeat()

Функция repeat() не существует в более старой спецификации, поэтому она не поддерживается IE11.

Вам нужно использовать правильный синтаксис, который описан в другом ответе на этот пост, или объявить все длины строк и столбцов.

Вместо:

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: repeat( 4, 1fr );
      grid-template-columns: repeat( 4, 1fr );
  -ms-grid-rows: repeat( 4, 270px );
      grid-template-rows: repeat( 4, 270px );
  grid-gap: 30px;
}

Использование:

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;             /* adjusted */
      grid-template-columns:  repeat( 4, 1fr );
  -ms-grid-rows: 270px 270px 270px 270px;        /* adjusted */
      grid-template-rows: repeat( 4, 270px );
  grid-gap: 30px;
}

Старая ссылка на спецификацию: https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-repeating-columns-and-rows

span

Ключевое слово span не существует в более старой спецификации, поэтому оно не поддерживается IE11. Вам придется использовать эквивалентные свойства для этих браузеров.

Вместо:

.grid .grid-item.height-2x {
  -ms-grid-row: span 2;
      grid-row: span 2;
}
.grid .grid-item.width-2x {
  -ms-grid-column: span 2;
      grid-column: span 2;
}

Использование:

.grid .grid-item.height-2x {
  -ms-grid-row-span: 2;          /* adjusted */
      grid-row: span 2;
}
.grid .grid-item.width-2x {
  -ms-grid-column-span: 2;       /* adjusted */
      grid-column: span 2;
}

Старая ссылка на спецификацию: https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-row-span-and-grid-column-span

grid-gap

Свойство grid-gap, а также его длинные формы grid-column-gap и grid-row-gap не существуют в более старой спецификации, поэтому они не поддерживаются IE11. Вы должны будете найти другой способ отделить коробки. Я не читал всю старую спецификацию, так что может быть метод. В противном случае попробуйте поля.

автоматическое размещение элементов сетки

В старой спецификации обсуждалось автоматическое размещение элементов сетки, но эта функция никогда не была реализована в IE11. (Автоматическое размещение элементов сетки теперь является стандартным в текущих браузерах).

Поэтому, если вы не определите размещение элементов сетки, они будут помещаться в ячейку 1,1.

Используйте свойства -ms-grid-row и -ms-grid-column.

Ответ 2

Ответ уже дали Фейсал Хуршид и Майкл_B.
Это просто попытка сделать возможное решение более очевидным.

Для IE11 и ниже вам нужно включить более раннюю спецификацию сетки в родительском div, например, body или как здесь "grid", например так:

.grid-parent{display:-ms-grid;}

затем определите количество и ширину столбцов и строк, например, так:

.grid-parent{
  -ms-grid-columns: 1fr 3fr;
  -ms-grid-rows: 4fr;
}

наконец, вам нужно явно указать браузеру, где должен быть размещен ваш элемент (элемент), например, так:

.grid-item-1{
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}

.grid-item-2{
  -ms-grid-column: 2;
  -ms-grid-row: 1;
}

Ответ 3

Майкл дал очень исчерпывающий ответ, но я хотел бы указать на несколько вещей, которые вы все еще можете сделать, чтобы иметь возможность использовать сетки в IE практически безболезненно.

Функция repeat поддерживается

Вы все еще можете использовать функцию повтора, она просто скрывается за другим синтаксисом. Вместо того, чтобы писать repeat(4, 1fr), вы должны написать (1fr)[4]. Это. Смотрите эту серию статей о текущем положении дел: https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/

Поддержка сетки разрыва

Сетки гапсов поддерживаются во всех браузерах, кроме IE. Таким образом, вы можете использовать @supports at-rule для условной установки зазоров сетки для всех новых браузеров:

Пример:

.grid {
  display: grid;
}
.item {
  margin-right: 1rem;
  margin-bottom: 1rem;
}
@supports (grid-gap: 1rem) {
  .grid {
    grid-gap: 1rem;
  }
  .item {
    margin-right: 0;
    margin-bottom: 0;
  }
}

Это немного многословно, но, с другой стороны, вам не нужно вообще отказываться от гридов только для поддержки IE.

Используйте Autoprefixer

Я не могу подчеркнуть это достаточно - половину боли гридов решают, просто используя autoprefixer на вашем этапе сборки. Напишите свой CSS стандартным способом и просто позвольте авторефиксору сделать это, автоматически преобразовав все свойства старой спецификации. Когда вы решите, что не хотите поддерживать IE, просто измените одну строку в конфигурации браузера, и вы удалите весь специфичный для IE код из ваших встроенных файлов.

Ответ 4

Для поддержки IE11 с автоматическим размещением я конвертировал макет grid в table каждый раз, когда использовал макет сетки только в 1 измерении. Я также использовал margin вместо grid-gap.

Результат тот же, посмотри как ты можешь это сделать здесь https://jsfiddle.net/hp95z6v1/3/