重復 CSS 網格布局，每 X 行使用命名列

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>