CSS: отображение: сетка и/или -ms-сетка

Ответ 1

Преобразование нового синтаксиса макета CSS Grid в устаревший IE - действительно сложная задача. Это не просто вопрос добавления префиксов поставщиков.

IE имеет очень ограниченную поддержку того, что присутствует в новой версии CSS Grid Layout. IE не поддерживает

• автоматическое размещение и выбор его потока (CSS-свойство grid-auto-flow);
• повторяющиеся столбцы/строки (функция repeat и некоторые специальные значения, такие как auto-fill и auto-fit). В некоторых случаях это означает, что вам просто нужно заменить явными значениями, как в вашем случае, вы можете заменить grid-template-columns: repeat(4, 1fr) на -ms-grid-columns: 1fr 1fr 1fr 1fr, и это будет работать отлично. Но если у вас есть что-то вроде grid-template-columns: repeat(auto-fill, 1fr), это невозможно реализовать в IE;
• пробелы в ячейках сетки (свойства CSS grid-row-gap, grid-column-gap, grid-gap). Пробелы можно подделать, используя дополнительные дорожки сетки;
• автоматически генерируемые треки (свойства CSS grid-auto-columns, grid-auto-rows);
• именованные области сетки (свойства grid-area, grid-template-areas CSS).

Вы просто должны забыть об этой возможности для IE.

Также некоторые значения поддерживаемых свойств IE не поддерживаются

Autoplacement

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

Если вы не разместите элементы, они будут складываться в первой ячейке сетки. Это означает, что вы должны явно установить позицию для каждого элемента сетки, или она будет находиться в первой ячейке. Если у вас есть такая разметка:

.wrapper {
  display: -ms-grid;
  display: grid;
  grid-gap: 10px;
  -ms-grid-columns: 50px 50px;
  grid-template-columns: 50px 50px;
  -ms-grid-rows: 50px 50px;
  grid-template-rows: 50px 50px;
  background-color: #fff;
  color: #444;
}

.box {
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

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

Ответ 2

Ваше правило display должно быть правильно структурировано. То, что у вас есть, недействительно.

display: grid -ms-grid;

Кроме того, ваше правило grid-template-rows недопустимо. Предполагается, что первым аргументом будет целое число, которое определяет количество повторений.

grid-template-rows: repeat(150px, 50px);

Кроме того, я не верю, что нотация repeat() существовала в более старых спецификациях. Похоже, что это было введено в текущей спецификации, поэтому IE не будет поддерживать его.

-ms-grid-columns: repeat(4, 1fr);
-ms-grid-rows: repeat(150px, 50px);

Наконец, лучше всего ставить официальные (W3C) свойства после префиксных версий, чтобы они имели приоритет в каскаде (более подробно).

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

.container {
  display: -ms-grid; 
  display: grid;

  -ms-grid-columns: 1fr 1fr 1fr 1fr;           
  grid-template-columns: repeat(4, 1fr);

  -ms-grid-rows: 150px 50px;
  grid-template-rows: 150px 50px;

  -ms-grid-gap: 1vw;
  grid-gap: 1vw;
}

Ответ 3

Ответ Вадима в значительной степени то, что вы должны сделать. Но есть еще несколько хитростей CSS, которые вы можете использовать, чтобы облегчить вашу боль.

0 Обязательно прочитайте этот пост в блоге, чтобы решить, хотите ли вы использовать сетки для веб-сайтов, которые поддерживают IE: https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the -ie-реализация-оф-CSS-сетка-макет/

Если ваш ответ на предыдущий вопрос "Да", читайте дальше:

1. Используйте авторефиксер. Он заменит некоторые свойства CSS-сетки на их эквивалент IE. Но учитывая, насколько сложными могут быть свойства сетки (повторы, минимальные значения, интервалы и т.д.), Авторефиксатор не может охватить все случаи.

2. Очень надежный компаньон в тех случаях, когда вы хотите написать CSS, совместимый со спецификацией, но при этом поддерживать IE - это @supports() at-rule. Я использую его, чтобы использовать более продвинутые свойства сетки, такие как grid-gaps в grid-gaps и т.д.:

   .card-list {
     grid-row: 4;
     grid-column: 1 / 3;
     padding: 1.5vh 1vh;
     display: grid;
     grid-template-rows: 1fr 1fr;
     grid-template-columns: 1fr 1fr;
   }
   .card {
     margin-bottom: 1vh;
   }
   .card:nth-of-type(odd) {  /* takes care of IE */
     margin-right: 1vh;
     grid-column: 1;
   }
   .card:nth-of-type(even) {
     grid-column: 2;
   }
   
   @supports(grid-gap: 1vh) { /* still using standard code! */
     .card-list {
       grid-gap: 1vh;
     }
     .card {
       margin-right: 0;
       margin-bottom: 0;
     }
   }