如何将具有相同 class 的元素放置在一列上，并在具有 css 网格的不同行上放置？

Question

我有一个问题“choice/match”，我需要在一个列中进行选择，并在另一个带有网格的列中进行匹配 css，我的问题是匹配列重叠。

这是现在的样子：

.grid{
  display:grid; 
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.grid>div{
  padding:12px;
  margin:0;
  color:#fff;
  background:#222;
}

.choice{
  grid-column-start: 1;
}
.match{
  grid-column-start:2;
  grid-row-start:1;
}

<div class="grid">
 <div class="choice">Choice 1</div>
 <div class="choice">Choice 2</div>
 <div class="choice">Choice 3</div>
 <div class="match">Match 1</div>
 <div class="match">Match 2</div>
 <div class="match">Match 3</div>
</div>

如果我删除 grid-row-start 它从第二行开始。
仅供参考，这只是一个示例，该问题具有动态相等的匹配项和列数。

Answer 1

添加grid-auto-flow: dense

.grid{
  display:grid; 
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: dense;
  gap:12px;
}

.grid>div{
  padding:12px;
  margin:0;
  color:#fff;
  background:#222;
}

.choice{
  grid-column-start: 1;
}
.match{
  grid-column-start:2;
}

<div class="grid">
 <div class="choice">Choice 1</div>
 <div class="choice">Choice 2</div>
 <div class="choice">Choice 3</div>
 <div class="match">Match 1</div>
 <div class="match">Match 2</div>
 <div class="match">Match 3</div>
</div>

如何将具有相同 class 的元素放置在一列上，并在具有 css 网格的不同行上放置？

How to place elements with same class on a column and different rows with css grid?

html

css

css-grid