跨浏览器网格布局

Question

当我开始检查Edge上的网格布局时，显示存在某种问题。 Chrome接受我的grid-template-columns: nnnn没问题，其中n是我的列。

但是Edge需要-ms-前缀和-ms-grid-columns对我不起作用。

这是我的代码：

 .grid { display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 100px 100px 100px; border: 1px solid #888; width: 600px; height: 300px; } .grid div { margin: 5px; border: 1px solid #ccc; background: #CCF; } 

 <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> </div> 

Answer 1

IE \\ Edge使用旧语法并根据旧版本的网格规范工作 。 问题是IE \\ Edge不具有自动放置功能，因此，除非您为每个网格项手动指定-ms-grid-column和-ms-grid-row ，否则它们将堆叠在您看到的第一个单元格中在您的屏幕截图中

因此，要解决此问题，我将为每个网格项目指定行和列。 我省略了-ms-grid-row: 1和-ms-grid-column: 1因为它是默认值。 演示：

 .grid { display: -ms-grid; display: grid; -ms-grid-columns: 200px 200px 200px; grid-template-columns: 200px 200px 200px; -ms-grid-rows: 100px 100px 100px; grid-template-rows: 100px 100px 100px; border: 1px solid #888; width: 600px; height: 300px; } .grid div { margin: 5px; border: 1px solid #ccc; background: #CCF; } .grid > :nth-child(2) { -ms-grid-column: 2; } .grid > :nth-child(3) { -ms-grid-column: 3; } .grid > :nth-child(4) { -ms-grid-row: 2; } .grid > :nth-child(5) { -ms-grid-row: 2; -ms-grid-column: 2; } .grid > :nth-child(6) { -ms-grid-row: 2; -ms-grid-column: 3; } .grid > :nth-child(7) { -ms-grid-row: 3; } 

 <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> </div>