CSS ie11 中的网格，混入较少

Question

有没有人看到 css grids mixins on less for IE11。我尝试使用网格，但在 IE11 上写所有前缀太难了。我讲这个：

-ms-grid-row: 1;
-ms-grid-column: 3;
-ms-grid-column-span: 2;

grid-column: 3 ~'/' 5;
grid-row: 1;

有什么生活小窍门吗？

Codepen -> https://codepen.io/Muskos/pen/vpLeJg

Answer 1

如果我没看错你只需要：

.grid-mixin(@row, @column-start, @column-span, @row-span, @column-end: @column-start + @column-span, @row-end: @row + @row-span){
  -ms-grid-row: @row;
  -ms-grid-row-span: @row-span;
  -ms-grid-column: @column-start;
  -ms-grid-column-span: @column-span;

  grid-column: @column-start ~'/' @column-end;
  grid-row:  @row ~'/' @row-end;
}

并且在需要时您只需这样称呼它：

.grid-mixin(1,3,2,1);

您可以在此处尝试此解决方案：https://codepen.io/Muskos/pen/vpLeJg?editors=1100

此外，如果您正在使用 gulp、webpack 等，请使用 Autoprefixer。已经有大约 3 年了，我们不必将任何供应商前缀放入 CSS。只需编写标准 CSS，工具会完成剩下的工作。

CSS ie11 中的网格，混入较少

CSS grid in ie11 with less mixins

css

internet-explorer

less

internet-explorer-11

css-grid