CSS Grid с IE11 - PullRequest
Новая
       29

CSS Grid с IE11

0 голосов
/ 07 октября 2019

Насколько я понимаю, IE11 нужно установить свойства grid-column и grid-row. Пока вы используете grid-template-areas, вы можете положиться на Autoprefixer для преобразования областей в grid-column и grid-row, что здорово.

В моем случае я не использую области для определения моей сеткиЯ просто повторяю столбцы с одним и тем же шаблоном: 

  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  grid-column-gap: 10px;
  grid-row-gap: 20px;

Итак, я думаю о лучшем способе реализации поддержки CSS-сетки в моих сетках для IE11. В основном это означает: установка grid-column и grid-row для каждого дочернего элемента оболочки сетки.

Сейчас я рассматриваю возможность использования старого доброго цикла Sass для рендеринга набора правил CSS, например: 

$column: 1;
@for $i from 1 through 100 { // 100 = just a large amount that I'll never reach
 $row: ceil($i/3); 
 .grid-item:nth-of-type(#{$i}) {  
    grid-column: #{$column};
    grid-row: #{$row};
  }
  $column: $column + 1;
  @if $i % 3 == 0 {
    $column: 1;
  }
}

Я думаю, что это должно сработать. Но я не уверен, что это хорошее решение. Если бы я мог, я бы использовал решение без Sass, просто используя Autoprefixer.

Есть идеи?

...