IE和MS Edge中的CSS网格自动宽度无法正常工作

Question

有IE和Edge特定的问题.使用"CSS网格布局"和auto宽度似乎无法在IE 10/11或甚至最新版本的Edge中使用.(适用于Chrome和FireFox.)

CodePen链接

.test {
  width 100%;
}

.test #contain {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50px 10px auto;
  -ms-grid-rows: 50px;
  grid-template-columns: 50px auto;
  grid-template-rows: 50px;
  grid-column-gap: 10px;
}

.test .sec1 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  background-color: red;
}

.test .sec2 {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: red;
}

<div class="test">
  <div id="contain">
    <div class="sec1">1</div>
    <div class="sec2">2</div>
  </div>
</div>

那么我的错误是什么,或微软再次制造蹩脚的东西？

此外我认为Edge应该有一个完整的最新CSS网格实现,但我想不是因为我仍然需要使用-ms.

Answer 1

IE/Edge CSS网格布局根据旧规范在哪里工作的问题

auto相当于minmax(min-content, max-content).

并根据新的规格

auto
最大,相同max-content.至少,表示占用网格项的最大最小大小(由min-width/ 指定min-height)grid track.

在此示例中,您不需要auto值,您需要1fr占用所有剩余宽度.顺便说一下,代码中的一些样式是多余的.演示:

.test {
  width 100%;
}

.test #contain {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50px 10px 1fr;
  -ms-grid-rows: 50px;
  grid-template-columns: 50px 1fr;
  grid-template-rows: 50px;
  grid-column-gap: 10px;
}

.test .sec1 {
  /* this is default value for IE/Edge, grid items always stack in first cell for IE/Edge */
  -ms-grid-row: 1;  /* redundant */
  -ms-grid-column: 1;  /* redundant */
  background-color: red;
}

.test .sec2 {
  /* this is default value for IE/Edge, grid items always stack in first cell for IE/Edge */
  -ms-grid-row: 1; /* redundant */
  -ms-grid-column: 3;
  /* all this value will be used by default due to auto-placement of grid items (which is not working in IE/Edge) */
  grid-column-start: 2; /* redundant */
  grid-column-end: 3; /* redundant */
  grid-row-start: 1; /* redundant */
  grid-row-end: 2; /* redundant */
  background-color: red;
}

<div class="test">
  <div id="contain">
    <div class="sec1">1</div>
    <div class="sec2">2</div>
  </div>
</div>