Css 重复网格布局，项目数量未知

我正在处理一组项目，并试图用css的网格定位它们。我的问题是，我把它们放在第n个孩子身上，所以在前6个孩子之后，它就破裂了。我希望能够拥有无限数量的物品，它们都能正确放置。基本上，布局应在前6项之后重复

.wrapper{
显示：网格；
网格模板柱：计算（50%-4px）计算（50%-4px）；
网格模板行：120px 120px 120px 240px；
间隙：8px；
左边距：0；
右边距：0；
}
.项目{
背景：#bada55；
}
.项目：第n个孩子（1）{
网格行开始：1；
网格行端：3；
}
.项目：第n个孩子（2）{
网格行开始：1；
网格行端：2；
}
.项目：第n个孩子（3）{
网格行开始：2；
网格行端：3；
}
.项目：第n个孩子（4）{
网格列开始：1；
网格柱端：3；
网格行开始：3；
网格行端：4；
}

项目
项目
项目
项目
项目
项目
项目
项目
项目

如下所示：

.wrapper{
显示：网格；
网格模板列：1fr 1fr；/*fr而不是%*/
网格自动行：120px 120px 120px 240px；/*自动行而不是模板行*/
栅格自动流动：密集；/*填充所有空间*/
间隙：8px；
}
.项目{
背景：#bada55；
}
.项目：第n个子项（6n+1）{
网格行：跨度2；/*我将取2行*/
}
.项目：第n个子项（6n+4）{
网格列：1/-1；/*我将获取所有列*/
}

项目
项目
项目
项目
项目
项目
项目
项目
项目