Javascript 重复CSS网格布局，每X行有命名列

我有一个网格，其中有两个命名列（

[name]

和

[crown]

）和未知数量的行。每行将有一个

名称

元素，可能有也可能没有

皇冠

元素。我希望的是最大行数为3，这样当有3行以上时，它们将出现在一个新的相邻的2列集合中

例如，使用以下数据：

[
{name:A，crown:true}，
{name:B，crown:false}，
{name:C，crown:true}，
{name:D，crown:false}，
{name:E，crown:true}
]

看起来是这样的：

我尝试过使用网格自动流、网格自动行和其他属性，但我尝试的几乎所有内容都是这样的：

元素是使用Mustache模板创建的，因此，如果不首先获取输入数据并循环/修改它（可以这样做，但不可取），我就无法为单个元素分配不同的类/列号，以便将它们放置在特定的列中

有没有其他方法可以达到第一张图片的效果

以下是我尝试使用的代码示例：

.grid{
显示：网格；
网格模板列：[name]1fr[crown]1fr；
证明项目：中心；
对齐项目：居中；
网格模板行：重复（3，1fr）；
宽度：最小含量；
}
.grid>*{
填充：0.25雷姆1.5雷姆；
}
.grid>.name{
网格列：名称；
}
.grid>.crown{
格构柱：冠；
颜色：金色；
}

A.
#
B
C
#
D
E
#

您正在指定

网格模板列：[name]1fr[crown]1fr

。因此，你最终总会得到两个分数

我建议您用一个

[name]

和一个

[crown]

将div包装在另一个div中，就像一个单元格一样。使用rule

grid auto flow:column

，我们可以得到期望的结果

.grid{
显示：内联网格；
网格模板行：重复（3，1fr）；
网格自动流：列；
}
.grid_项目{
显示：网格；
网格模板列：[name]1fr[crown]1fr；
证明项目：中心；
对齐项目：居中；
}
.grid_项目>*{
填充：0.25雷姆1.5雷姆；
}
.grid_项目.冠{
颜色：金色；
}

A.
#
B
C
#
D
E
#

请重新编写问题。不能understand@vithushaji很抱歉，我已经重新编写了它，希望它更加清晰。生成HTML的代码或逻辑与HTML的样式设置方式无关。我建议将其移除。啊，我明白了，这非常有效。谢谢。@epiqu1n，很高兴解决方案有所帮助。