CSS网格：如何使相同网格区域中的元素对齐？

Question

我的目标是将CSS网格布局用于盒子的两列砌体布局。给定一个带有孩子的元素：

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

带孩子们将自己交替排成一列。我的想法是要有两个网格区域left，right并告诉孩子们分成两个网格区域：

section {
  display: grid;
  grid-template-areas: "left right";
}

div:nth-child(odd) {
  grid-area: left;
}

div:nth-child(even) {
  grid-area: right;
}

这是一个说明我当前状态的JSBin：https ://jsbin.com/zaduruv/edit?html,css,output

不幸的是，元素的反应与position:absolute设置时完全相同。也就是说，他们都挤在顶端，彼此重叠。

CSS网格布局属性是否有可能像通常那样将子级排列在列中position: static？

Answer 1

你不能。由于元素可以在 CSS 网格中相互重叠，因此它甚至不会尝试对齐它们。顾名思义，它是网格布局，而不是列布局。

更好的解决方案是使用CSS 多列布局，如下面的代码片段。

多列布局的唯一问题是，它垂直而不是水平分布 div，所以你会得到这样的结果：

1 4
2 5
3 6

而不是这个：

1 2
3 4
5 6

1 4
2 5
3 6

1 2 
3 4
5 6