即使使用 -ms 前缀，CSS Grid 也无法在 IE11 或 Edge 上运行 [重复]答案

【问题标题】：CSS Grid not workiing on IE11 or Edge even with -ms prefix [duplicate]即使使用 -ms 前缀，CSS Grid 也无法在 IE11 或 Edge 上运行 [重复]
【发布时间】：2018-04-21 04:51:03
【问题描述】：

我一直在遵循指南 here 让网格在 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;
}

这里有一个 codepen 链接：

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

我是不是把这段代码弄错了，还是应该使用网格的 ms 实现以外的东西？

【问题讨论】：

标签： css internet-explorer-11 microsoft-edge css-grid

【解决方案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

不如其他浏览器方便... 希望这会有所帮助；）

【讨论】：

非常感谢。我已经尝试过了，但回想起来我一定是不小心从 0 而不是 1 开始索引。