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

【问题标题】：CSS Grid auto placement in IE/EDGEIE/EDGE 中的 CSS 网格自动放置
【发布时间】：2018-01-08 05:40:38
【问题描述】：

使用 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

【问题讨论】：

标签： css css-grid

【解决方案1】：

答案是否定的（很遗憾）。

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

本节描述了有关网格项自动放置的早期想法。对于这样的特征，多种算法是可能的。这里推荐一个。

在 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>

【讨论】：

很好的解释，看起来 CSS 网格仍然无法满足我的需求和浏览器支持水平（该死）
@JoeHastings 您可以为某些模拟自动放置的情况添加一些原始 JavaScript，并将此脚本仅应用于 IE 和 Edge。这取决于您的布局的复杂性。
我在搜索结果网格中使用它，我不知道会有多少项目，我可以添加一些 js 来处理展示位置，但我认为最好坚持使用另一个纯 CSS 解决方案
因为你的网格中的所有元素都是统一的，所以这里不需要 CSS Grid。只需使用 Flexbox。
@bob-12345 问题是关于 IE 中的自动放置。这只是一个简单的演示，在非常简单的情况下，您当然可以将 CSS Grid 替换为其他 CSS 模块，但在更高级的情况下则不能。