Html 复杂网格自动布局

我正在制作一个布局中的单元格数量未知的网站，我只想用CSS制作样式

我的想法是使用CSS网格，但是有没有一种方法可以像图片上显示的那样使用它呢？我在想：第N个孩子之类的东西？“部分”的数量（在本场景中每4个正方形高）始终是一行三个，但行数未知

我想到了这个，但它把第四部分放到了#1；而且它不适用于未知数量的节/行

.container{
显示：网格；
网格模板柱：1fr 1fr 1fr；
网格模板行：重复（3，[img start]200px[img end basic start]200px[basic end me start]auto[me end why start]auto[why end]）；
证明内容：中心；
对齐项目：居中；
}
.容器分区：第n个子（12n-11），.容器分区：第n个子（12n-10），.容器分区：第n个子（12n-9），.容器分区：第n个子（12n-8）{
网格柱：1；
}
.容器分区：第n个子（12n-7），.容器分区：第n个子（12n-6），.容器分区：第n个子（12n-5），.容器分区：第n个子（12n-4）{
网格柱：2；
}
.container div:n子（12n-3），.container div:n子（12n-2），.container div:n子（12n-1），.container div:n子（12n）{
网格柱：3；
}
.货柜部：第n个子（4n-3）{
网格行：img；
}
.货柜部：第n个子（4n-2）{
网格行：基本；
}
.容器分区：第n个子（4n-1）{
网格行：我；
}
.容器分区：第n个子项（4n）{
网格行：为什么；
}

第一组
第二组
第三组
第四组
第五组
第六组
第7课
第8课
第9课
第10课
第11课
第12课

您可以尝试以下方法：

.container{
显示：网格；
网格自动流动：密集；/*不要留下任何空单元格*/
网格自动行：每行50px；/*50px*/
网格自动列：1fr；/*1fr用于每个列*/
计数器复位：num；
}
.容器>*{
网格列：1；/*默认情况下，所有网格列都位于第一列中*/
}
.container>*：第n个子项（12n+5），
.container>*：第n个子项（12n+6），
.container>*：第n个子项（12n+7），
.container>*：第n个子项（12n+8）{
网格列：2；/*从5到8的第2列*/
}
.container>*：第n个子项（12n+9），
.container>*：第n个子项（12n+10），
.container>*：第n个子项（12n+11），
.container>*：第n个子项（12n+12）{
网格列：3；/*从9到12的第3列*/
}
.container>*：：之前{
内容：计数器（num）；
计数器增量：num；
字体大小：30px；
}

---

您可以尝试以下方法：

.container{
显示：网格；
网格自动流动：密集；/*不要留下任何空单元格*/
网格自动行：每行50px；/*50px*/
网格自动列：1fr；/*1fr用于每个列*/
计数器复位：num；
}
.容器>*{
网格列：1；/*默认情况下，所有网格列都位于第一列中*/
}
.container>*：第n个子项（12n+5），
.container>*：第n个子项（12n+6），
.container>*：第n个子项（12n+7），
.container>*：第n个子项（12n+8）{
网格列：2；/*从5到8的第2列*/
}
.container>*：第n个子项（12n+9），
.container>*：第n个子项（12n+10），
.container>*：第n个子项（12n+11），
.container>*：第n个子项（12n+12）{
网格列：3；/*从9到12的第3列*/
}
.container>*：：之前{
内容：计数器（num）；
计数器增量：num；
字体大小：30px；
}