CSS Grid 在 IE11 或 Edge 上不起作用，即使前缀为 -ms

Question

我一直在按照这里的指南让网格在IE 11上工作。我的问题是，即使遵循这些规则，列和行也只是相互重叠，而不是采用它们的网格位置。

下面是一个会导致问题的简单代码示例：

.HTML

<div class="grid">
  <div>Top Left</div>
  <div>Top Right</div>
  <div>Bottom Left</div>
  <div>Bottom Right</div>
</div>

.CSS

.grid {
  display: -ms-grid;
  -ms-grid-columns: 200px 200px;
  -ms-grid-rows: 200px 200px;
}

这里有一个代码笔链接：

https://codepen.io/anon/pen/pdNWMj

我

弄错了这段代码，还是我应该使用网格的毫秒实现以外的其他东西？

Answer 1

必须使用 -ms-grid-column 和 -ms-grid-row 为每个子项指定网格中的位置。

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 200px 200px;
  -ms-grid-rows: 200px 200px;
  grid-template-columns: 200px 200px;
  grid-template-rows: 200px 200px;
}
.top-left {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}
.top-right {
  -ms-grid-column: 2;
  -ms-grid-row: 1;
}
.bottom-left {
  -ms-grid-column: 1;
  -ms-grid-row: 2;
}
.bottom-right {
  -ms-grid-column: 2;
  -ms-grid-row: 2;
}

<div class="grid">
  <div class="top-left">Top Left</div>
  <div class="top-right">Top Right</div>
  <div class="bottom-left">Bottom Left</div>
  <div class="bottom-right">Bottom Right</div>
</div>

https://codepen.io/anon/pen/ZaBaVa

不如其他浏览器方便...希望这有所帮助;)