IE11网格自身崩溃

Question

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

Example on 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中加载页面时，就可以了（请参见上图）。 las，这就是IE11中的外观。

尽管我已经添加了相关的MS前缀，但看起来这些盒子还是彼此堆叠在一起的。

有人知道我在这里想念什么吗？