IE/EDGE 中的 CSS 网格自动放置

Question

使用 IE 11 和 EDGE 支持的旧 CSS 网格规范。网格元素是否可以像当前规范一样自动放置？

即不必在网格项上定义列:

.item:nth-child(1) {
    -ms-grid-column: 1;
}
.item:nth-child(2) {
    -ms-grid-column: 2;
}
.item:nth-child(n) {
    -ms-grid-column: n;
}

https://codepen.io/JoeHastings/pen/mMPoqB

Answer 1

答案是否定的(不幸的是)。

Old specs section about auto-placement有这样的序言

This section describes early thinking around automatic placement of Grid Items. Multiple algorithms are possible for such a feature. One is proposed here.

在 IE/Edge 中运行这段代码，你会看到很多带有 1 的行在控制台中，因为 IE/Edge 将所有网格元素堆叠在第一个单元格中，并且您无法强制 IE/Edge 自动放置网格元素。设置 -ms-grid-column 和 -ms-grid-row 至 auto不会更改任何内容，因为不支持此值(如您在 MSDN 链接中所见)。演示:

var gridItems = document.querySelectorAll(".grid__item");
for (var i = 0; i < gridItems.length; i++) {
  var gridItem = gridItems[i];
  console.log(window.getComputedStyle(gridItem)["-ms-grid-row"]);
  console.log(window.getComputedStyle(gridItem)["-ms-grid-column"]);
}

.grid {
  display: -ms-grid;
  -ms-grid-columns: 100px 100px 100px;
  -ms-grid-rows: 100px 100px 100px;
}

.grid__item {
  -ms-grid-row: auto;
  -ms-grid-column: auto;
  background-color: tomato;
  color: white;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="grid">
  <div class="grid__item">One</div>
  <div class="grid__item">Two</div>
  <div class="grid__item">Three</div>
  <div class="grid__item">Four</div>
  <div class="grid__item">Five</div>
  <div class="grid__item">Six</div>
  <div class="grid__item">Seven</div>
  <div class="grid__item">Eight</div>
  <div class="grid__item">Nine</div>
</div>