如何让这个简单的 css-grid 布局在 IE11 中工作

Question

我正在为一个简单的 3 面板幻灯片制作原型。在第二个面板上，我想使用 css-grid 有一种简单的方法将面板分成 4 个相等且响应迅速的区域，100% 容器的高度。

这是演示：

http://jsfiddle.net/stratboy/obnkc2x5/1/

部分代码：

<div class="sub-grid-container">
  <div class="sub-grid-item">sub 1</div>
  <div class="sub-grid-item">sub 2</div>
  <div class="sub-grid-item">sub 3</div>
  <div class="sub-grid-item">sub 4</div>
</div>

以及相关的css：

.sub-grid-container{
  display:grid;
  height: 100%;

  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  background-color: red;
}

注意：我也在使用 Autoprefixer，它正在编译这样的东西：

.sub-grid-container {
  display: -ms-grid;
  display: grid;
  height: 100%;
  -ms-grid-columns: 50% 50%;
      grid-template-columns: 50% 50%;
  -ms-grid-rows: 50% 50%;
      grid-template-rows: 50% 50%;
  background-color: red; }

除 IE11 外，所有代码都可以在任何地方使用。在 IE11 中，我有 4 个网格单元重叠，并且容器的高度不是 100%，宽度也不是 100%。

我对 css 网格很陌生，但我认为我正在做一些非常基本的事情。我做错了什么？或者，也许用 IE11 是不可能的？

Answer 1

好的，我设法做到了，并且在 autoprefixer 的帮助下它正在工作。基本上，在 IE11 上，您必须使用 grid-row 和 grid-column 属性来判断单元格的开始和结束位置。此外，要使整个事情与 Autoprefixer 一起工作，您必须添加 grid-template 属性并且不要使用单个 grid-template-columns/rows 语句（最后一件事是因为否则 autoprefixer 不会写入单元格的 -ms-grid-行/列道具）：

.sub-grid-container {
  display: grid;
  height: 100%;
  // grid-template-columns: 50% 50%; // do not
  // grid-template-rows: 50% 50%; // do not
  grid-template:
    "a   b" 1fr
    "c   d" 1fr /
    1fr  1fr; // you can use fr units instead %
}

.cell-1 {
  grid-area: a;
}

.cell-2 {
  grid-area: b;
}

.cell-3 {
  grid-area: c;
}

.cell-4 {
  grid-area: d;
}

自动添加前缀的结果是这样的：

.sub-grid-container {
  display: -ms-grid;
  display: grid;
  height: 100%;
  -ms-grid-rows: 1fr 1fr;
  -ms-grid-columns: 1fr 1fr;
      grid-template: "a   b" 1fr "c   d" 1fr / 1fr  1fr;

}

.cell-1 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: a;
}

.cell-2 {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: b;
}

.cell-3 {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: c;
}

.cell-4 {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: d;
}