使用 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
答案是否定的（不幸的是）。
关于自动放置的旧规格部分有这样的序言
本节描述有关网格项自动放置的早期思考。对于这样的特征，多种算法是可能的。这里提出了一种方案。
在 IE/Edge 中运行此代码，您将看到很多行1在控制台中，因为 IE/Edge 将所有网格项堆叠在第一个单元格中，并且您不能强制 IE/Edge 自动放置网格项。环境-ms-grid-column and -ms-grid-row to 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
