为每 X 行重复带有命名列的 CSS 网格布局

Question

我有一个网格，其中有 2 个命名列（[name] 和 [crown]）和未知数量的行。每行都有一个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 }
]

应该是这样的：

我尝试过使用 grid-auto-flow、grid-auto-rows 和其他属性，但我尝试的几乎所有东西都以这样的方式结束：

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

还有其他方法可以实现第一张图片中的结果吗？

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

.grid {
  display: grid;
  grid-template-columns: [name] 1fr [crown] 1fr;
  justify-items: center;
  align-items: center;
  grid-template-rows: repeat(3, 1fr);
  width: min-content;
}

.grid > * {
  padding: 0.25rem 1.5rem;
}

.grid > .name {
  grid-column: name;
}

.grid > .crown {
  grid-column: crown;
  color: gold;
}

<div class="grid">
  <div class="name">A</div>
  <div class="crown">#</div>
  <div class="name">B</div>
  <div class="name">C</div>
  <div class="crown">#</div>
  <div class="name">D</div>
  <div class="name">E</div>
  <div class="crown">#</div>
</div>

Answer 1

您正在指定grid-template-columns: [name] 1fr [crown] 1fr。因此，最后你总是会收到两个分数。

我建议您将带有 [name] 和 [crown] 的 div 包装在一个额外的 div 中，这就像一个单元格。并且使用规则grid-auto-flow: column，我们可以得到想要的结果。

.grid {
    display: inline-grid;
    grid-template-rows: repeat(3, 1fr);
    grid-auto-flow: column;
}

.grid_item {
    display: grid;
    grid-template-columns: [name] 1fr [crown] 1fr;
    justify-items: center;
    align-items: center;
}

.grid_item > * {
    padding: 0.25rem 1.5rem;
}

.grid_item .crown {
    color: gold;
}

<div class="grid">
    <div class="grid_item">
        <div class="name">A</div>
        <div class="crown">#</div>
    </div>
    <div class="grid_item">
        <div class="name">B</div>
        <div class="crown"></div>
    </div>
    <div class="grid_item">
        <div class="name">C</div>
        <div class="crown">#</div>
    </div>
    <div class="grid_item">
        <div class="name">D</div>
        <div class="crown"></div>
    </div>
    <div class="grid_item">
        <div class="name">E</div>
        <div class="crown">#</div>
    </div>
</div>