css - 使用 css 网格将元素成对放置在两行中

Question

我正在尝试按特定顺序呈现元素，请看图片:

即有无限多个元素，按列，每列有两个元素。您是否有任何想法如何使用网格或 flexbox 或任何其他方式(可能通过组合它们)对此进行编码？我知道我可以用表格来做到这一点，但这次我尽量避免使用它们。

Answer 1

nth-child() 在这里可以提供帮助

.box {
  display:grid;
  grid-auto-flow:column dense; /* column flow with "dense" to fill all the cells */
  grid-template-rows:50px 50px; /* 2 rows */
  grid-auto-columns:50px;
}
.box span:nth-child(4n + 2) { /* this will do the trick*/
   grid-row:1; /* we make 2 in the first row and 3 will be pushed to second row */
}

/* irrelevant styles */
.box {
  counter-reset:num;
  grid-gap:5px;

}
.box span {
  background:yellow;
  font-size:25px;
}

.box span::before {
  content:counter(num);
  counter-increment:num;
}

<div class="box">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>