如何让CSS Grid列元素两两对应同行显示？

我需要让CSS Grid的左右列元素两两对应同行显示，期望效果如下：

+---+---+
| A | D |
+---+---+
| B | E |
+---+---+
| C | F |
+---+---+

而非当前的显示效果：

+---+---+
| A |   |
+---+---+
| B |   |
+---+---+
| C | D |
+---+---+
|   | E |
+---+---+
|   | F |
+---+---+

我尝试过使用grid-row属性，但希望避免通过id来定位元素，当前代码如下：

CSS代码 #

.container{
  display: grid;
  grid-template-columns: auto auto;
  background: yellow
}

.left {
  grid-column: 1;
  background:green;
}

.right{
  grid-column : 2;
  background: olive
}

HTML代码 #

<div class="container">
  <div class="left">A</div>
  <div class="left">B</div>
  <div class="left">C</div>
  
  <div class="right">D</div>
  <div class="right">E</div>
  <div class="right">F</div>
</div>

解决方案 #

不需要给元素加id，通过CSS的:nth-child()伪类选择器就能实现对应行的对齐：

.container{
  display: grid;
  grid-template-columns: auto auto;
  background: yellow
}

.left {
  grid-column: 1;
  background:green;
}

.right{
  grid-column : 2;
  background: olive
}

/* 左侧第n个元素对应第n行 */
.left:nth-child(1) { grid-row: 1; }
.left:nth-child(2) { grid-row: 2; }
.left:nth-child(3) { grid-row: 3; }

/* 右侧第n个元素对应第n行 */
.right:nth-child(4) { grid-row: 1; }
.right:nth-child(5) { grid-row: 2; }
.right:nth-child(6) { grid-row: 3; }

如果左右元素数量较多，也可以用CSS预处理器（如Sass）的循环来简化代码，避免重复书写。这种写法完全依赖类选择器和伪类，无需额外给元素添加id，就能精准实现左右元素两两同行的效果。

内容的提问来源于stack exchange，提问作者Aurore