Html 具有不同大小项目的网格布局

我被一个我不知道如何解决的问题困住了

我有一个网格系统，有18个相同大小的物品/盒子。我需要删除4个项目/盒子，并制作一个大项目/盒子

请检查下面的线框。这就是我想要的样子：）

.grid\u大{
边缘底部：200px；
}
.grid\u大。grid\u项目{
宽度：16.6%；
显示：内联块；
浮动：左；
}
.grid\u大。grid\u项目img{
宽度：100%；
边框：1px实心；
/*可见性：隐藏*/
}
.grid\u大。grid\u项目。grid\u内容{
利润率：20px；
}

---

您可以使用网格执行类似操作，该网格非常适合此类任务：

*{框大小：边框框}
.grid_big{
显示：网格；
网格模板：重复（3，1fr）/重复（6，1fr）；/*网格模板行/网格模板列*/
网格间距：10px；/*网格行间距/网格列间距*/
}
/*抓住第七个，使其跨越两行和两列*/
.grid_项：第n个子项（7）{
网格行：跨度2；
格构柱：跨度2；
}
img{
显示：块；/*删除底部边距/空白*/
宽度：100%；
边框：1px实心；
}

（网格模板区域）可能会解决您的问题。

谢谢，但我担心网格模板在我使用的所有浏览器中都不起作用。请检查此项。在那里，您可以检查它是否与您的浏览器一起工作。谢谢！在这种情况下，我不能使用网格模板，因为它需要根据我的任务在每个浏览器中工作。所以我需要用另一种方法来解决它。无论如何谢谢：）也许Flexbox可能值得我一试。然而，我不能告诉你，如果它将工作，因为我更喜欢网格。