使用css网格将项目成对放置在两行中
我正在尝试按特定顺序呈现项目，请看图片：
即有无限数量的项目，按列，每列有两个项目。您对如何使用网格或 flexbox 或任何其他方式（也许通过组合它们）进行编码有任何想法吗？我知道我可以用桌子来做，但这次我尽量避免使用它们。
回答
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>
<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>
