IE11的CSS网格布局支持

Question

我们正在尝试使用IE-11的CSS网格开发UI布局，这里的问题是我们已经为所有浏览器开发了布局，但尚未在IE11上进行测试，现在我们处于应用程序的最后阶段，并试图使其适用于IE11，但看起来当前的CSS不适用于IE11，因此决定通过浏览器检测为IE11编写单独的CSS。 这是我的模型（尝试在不更改HTML的情况下进行开发->如果更改HTML，它将影响其他浏览器）

我的问题是，如果您看到代码，则无法在不更改html结构的情况下生成模型中所示的所需布局。

body {
  margin: 100px;
}
.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  margin: 10px;
}

.ie-content {
  display: -ms-grid;
  display: grid;
  grid-gap: 10px;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr 1fr;
  background-color: blueviolet;
  color: #444;
}

.ie-viewer {
   -ms-grid-column: 1;
   grid-column: 1;
  background: yellowgreen;
  -ms-grid-column-span: 3;
  grid-column: 1 / span 3;
}
.ie-viewerControls {
  -ms-grid-column: 1;
  grid-column: 1;
}
.ie-configure {
  -ms-grid-column: 4;
  grid-column: 4;
  background: red;
  height:100px;
}

<div class="ie-content">
        <div class="box ie-viewer">viewer</div>
        <div class="box ie-viewerControls">viewerControls</div>
        <div>
            <div class="box ie-configure">configure </div>
        </div>
    </div>
</div>

Answer 1

IE 11没有grid-column-gap和grid-row-gap的等效项。如果需要，您将必须添加伪造的列/空白，例如

-ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr;

最重要的是，IE 11网格中的每个元素必须沿行/行方向放置，否则它们最终将以行1 /行1的方式彼此堆叠。

话虽这么说，但是在放置/扩展元素时，当然需要考虑假的“空白”列/行。