html - IE11 Grid 自身崩溃

Question

我正在尝试在 IE11 中使用 CSS Grid。据我所知，这是可能的。我想做的是这样的：

CodePen 上的示例

我的 HTML 很简单：

<div class="grid">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
</div>

CSS是

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 20px 1fr 20px 1fr;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.col {
  margin: 0;
  padding: 0;
  height: 100px;
  background: #ddd;
}

当我在 chrome 中加载页面时，它很好（见上图）。唉，这就是它在 IE11 中的样子。

即使我已经添加了相关的 MS 前缀，看起来这些盒子仍然是堆叠在一起的。

有人知道我在这里缺少什么吗？

标签： htmlcssinternet-explorer-11css-grid