如何用CSS Grid或Flexbox将未知数量元素分为2列布局

现有如下HTML结构，容器内子元素数量未知：

<div class="container">
    <div class="child">Item 1</div>
    <div class="child">Item 2</div>
    <div class="child">Item 3</div>
    <div class="child">Item 4</div>
    <div class="child">Item 5…</div>
</div>

需要将子元素排列为2列，呈现效果如下：

Item 1  Item 4
Item 2  Item 5
Item 3

此前尝试CSS Grid（未知行数无法实现）和Flexbox（需固定容器高度）均未找到可行方案，寻求解决办法。

使用CSS Grid即可实现，无需固定容器高度或提前知晓子元素数量，代码如下：

.container {
  display: grid;
  grid-auto-flow: column; /* 元素按列方向自动填充 */
  grid-template-rows: repeat(auto-fit, min-content); /* 行高自适应内容，自动生成所需行数 */
  gap: 1rem; /* 可选，调整元素间的间距 */
}

原理说明 #

• grid-auto-flow: column 改变网格的默认排列方向，让元素先填满第一列的所有行，再开始填充第二列；
• repeat(auto-fit, min-content) 会根据子元素的实际高度自动生成足够的行，确保每一列的元素垂直排列，同时左右两列的对应位置元素自然对齐，完全匹配需求。

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