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网格自动放置

回答

相关问题