Css 跨浏览器网格布局

当我开始检查Edge上的网格布局时，显示出现了某种问题。Chrome接受我的

网格模板列：n

没有问题，其中

n

是我的列

但是Edge需要

-ms-

前缀，而

-ms网格列

对我不起作用

这是我的密码：

.grid{
显示：网格；
网格模板列：200px 200px 200px；
网格模板行：100px 100px 100px；
边框：1px实心#888；
宽度：600px；
高度：300px；
}
.grid分区{
保证金：5px；
边框：1px实心#ccc；
背景：#共因失效；
}

1.
2.
3.
4.
5.
6.
7.

IE\Edge使用旧语法，并根据规则工作。问题是IE\Edge没有自动放置功能，因此除非手动为每个网格项指定

-ms网格列

和

-ms网格行

，否则它们将堆叠在第一个单元格中，如屏幕截图所示

为了解决这个问题，我将为每个网格项指定行和列。我省略了

-ms网格行：1

和

-ms网格列：1

，因为它是默认值。演示：

.grid{
显示：-ms网格；
显示：网格；
-ms网格列：200px 200px 200px；
网格模板列：200px 200px 200px；
-ms网格行：100px 100px 100px；
网格模板行：100px 100px 100px；
边框：1px实心#888；
宽度：600px；
高度：300px；
}
.grid分区{
保证金：5px；
边框：1px实心#ccc；
背景：#共因失效；
}
.grid>：第n个子项（2）{
-ms网格列：2；
}
.grid>：第n个子项（3）{
-ms网格列：3；
}
.grid>：第n个子项（4）{
-ms网格行：2；
}
.grid>：第n个子项（5）{
-ms网格行：2；
-ms网格列：2；
}
.grid>：第n个子项（6）{
-ms网格行：2；
-ms网格列：3；
}
.grid>：第n个子项（7）{
-ms网格行：3；
}

1.
2.
3.
4.
5.
6.
7.