IE/EDGE中的CSS網格自動放置

使用IE 11和EDGE支持的舊CSS網格規範。網格物品是否可以像目前的規格一樣自動放置？IE/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

來源

2017-08-01 Joe Hastings

根據舊/ 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，但它似乎並沒有 –

答案是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>

來源

2017-08-01 17:26:54

很好的解釋，看起來像CSS網格仍然無法滿足我的需求和瀏覽器支持水平然後（dammit） –

@JoeHastings你可以添加一些原始JavaScript在某些情況下將模擬自動放置並僅將此腳本應用於IE和Edge。這取決於你的佈局的複雜性。 –

我在搜索結果網格上使用它，我不知道會有多少項目，我可以添加一些js來處理該展示位置，但我認爲堅持另一個CSS唯一的解決方案是可取的 –

IE/EDGE中的CSS網格自動放置

回答

相關問題