Question

据我了解，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;

因此，我正在考虑在IE11的网格上实现CSS网格支持的最佳方法。这基本上意味着：在每个网格包装子代上设置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。

有什么想法吗？

带有IE11的CSS网格

0 个答案: