IE11使用较旧版本的Grid规范。
您使用的属性在较早的网格规范中不存在。使用前缀没有区别。
我立即看到了三个问题。
该repeat()功能在较早的规范中不存在，因此IE11不支持该功能。
代替：
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: repeat( 4, 1fr );
grid-template-columns: repeat( 4, 1fr );
-ms-grid-rows: repeat( 4, 270px );
grid-template-rows: repeat( 4, 270px );
grid-gap: 30px;
}
采用：
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr 1fr 1fr; /* adjusted */
grid-template-columns: repeat( 4, 1fr );
-ms-grid-rows: 270px 270px 270px 270px; /* adjusted */
grid-template-rows: repeat( 4, 270px );
grid-gap: 30px;
}
span关键字在较早的规范中不存在，因此IE11不支持该关键字。您必须为这些浏览器使用等效的属性。
代替：
.grid .grid-item.height-2x {
-ms-grid-row: span 2;
grid-row: span 2;
}
.grid .grid-item.width-2x {
-ms-grid-column: span 2;
grid-column: span 2;
}
采用：
.grid .grid-item.height-2x {
-ms-grid-row-span: 2; /* adjusted */
grid-row: span 2;
}
.grid .grid-item.width-2x {
-ms-grid-column-span: 2; /* adjusted */
grid-column: span 2;
}
该grid-gap属性及其长期形式grid-column-gap和grid-row- gap在较早的规范中不存在，因此IE11不支持它们。您将必须找到另一种分隔框的方法。我还没有阅读完整的旧规范，因此可能有一种方法。否则，请尝试边距。
但是该功能从未在IE11中实现。（在当前浏览器中，网格项目的自动放置现在是标准的）。
因此，除非您专门定义网格项的位置，否则它们将堆叠在单元格1,1中。
使用-ms-grid-row和-ms-grid-column属性。
602392714
清零编程群