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