CSS Grid中能否用grid-auto-flow:column并限制N行后换行？

现有一个CSS Grid布局，元素默认按行排列：

01 02 03 04
05 06 07 08
09 10 11 12

当前代码使用auto-fit设置列数，随可用宽度自适应。但需要实现先按列填充，每2行后换行的效果，示例如下：

01 03 05 07
02 04 06 08
09 11
10 12

尝试添加grid-auto-flow:column和grid-template-rows:repeat(2, auto)未成功。要求方案需满足：

• 适配任意数量元素
• 必须使用auto-fit
• 窄屏2列时呈现如下效果：

01 03
02 04
05 07
06 08
09 11
10 12

请问仅用CSS Grid能否实现该需求？

完全可以仅用CSS Grid实现该需求，核心是通过固定行组、元素行列定位结合auto-fit的自适应特性，达成分组列填充的效果，无需额外DOM结构。

核心实现代码 #

.grid-container {
  display: grid;
  /* auto-fit自适应列数，minmax的宽度值可按需调整 */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  /* 每组固定为2行 */
  grid-template-rows: repeat(2, auto);
  /* 开启密集布局，自动填充空白位置，避免元素错位 */
  grid-auto-flow: row dense;
  /* 可选：设置元素间距 */
  gap: 8px;
}

/* 奇数序号的元素（1、3、5...）定位到每组的第1行 */
.grid-item:nth-child(2n + 1) {
  grid-row: 1;
}

/* 偶数序号的元素（2、4、6...）定位到每组的第2行 */
.grid-item:nth-child(2n) {
  grid-row: 2;
}

原理说明 #

1. 自适应列数：repeat(auto-fit, minmax(100px, 1fr))让容器根据可用宽度自动调整列数，既满足宽屏多列、窄屏少列的响应式需求，又符合auto-fit的要求。
2. 固定行组：grid-template-rows: repeat(2, auto)定义每一组为2行，每一列对应一组的两个元素位置，为列填充提供布局基础。
3. 元素定位：通过:nth-child()选择器将奇数序号元素绑定到第1行，偶数序号元素绑定到第2行，视觉上就形成了“先列填充、每2行换组”的效果。
4. 密集布局：grid-auto-flow: row dense确保当元素总数为奇数时，后续元素会自动填充到下一组的空白行，避免出现大面积空白或布局错位。

效果验证 #

• 宽屏4列时，自动呈现目标布局：

01 03 05 07
02 04 06 08
09 11
10 12

• 窄屏2列时，自动适配为：

01 03
02 04
05 07
06 08
09 11
10 12

• 任意数量元素都能完美适配，结合Angular的@for循环时，只需将循环生成的元素放入该Grid容器即可，无需额外处理循环逻辑或DOM结构。

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