答案是NO(不幸)。
Old specs section about auto-placement有這樣的序言
本節介紹了各地的網格項目的自動佈局早思考。多種算法可用於這種功能。一個是在這裏提出的。
運行這段代碼在IE /邊緣,你會在控制檯中看到很多行與1
因爲IE /邊堆在第一個單元格的所有網格項目,你不能強迫IE /邊緣的地方電網項目自動。設置-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>
根據舊/ IE電網規範,答案是肯定的。 https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#automatic-placement-of-grid-items –
@Michael_B由於我對該規範的這一部分的理解,這應該工作:https://codepen.io/JoeHastings/pen/MvydYv,但它似乎並沒有 –