CSS实现最多2行的水平滚动网格方案咨询

需求与问题 #

我正在设计一个简易的水平滚动网格，需求为最多显示2行：若单元格可容纳在一行则显示一行，否则将剩余元素换行至第二行。请问能否通过Grid布局实现，还是必须使用Flex布局？

当前使用的Grid代码：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 162px);
  grid-template-rows: repeat(2, 162px);
  grid-auto-flow: column;
  grid-auto-columns: 162px;
  gap: 8px;
  overflow-x: auto;
  padding: 8px;
}

.grid-item {
  background-color: #ccc;
}

问题现象：红色网格因单元格数量较多，换行到第二行显示正常；但黄色网格元素较少，却仍会换行到第二行。

解决方案 #

方法一：修复Grid布局实现 #

Grid完全可以满足需求，问题出在grid-auto-flow: column的配置上——这个属性让元素按列优先排列（先填满第一列的两行，再填充第二列），即使元素数量少也会占用两行。只需要修改流向为行优先即可：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 162px);
  grid-template-rows: repeat(2, 162px);
  grid-auto-flow: row; /* 改为行优先排列 */
  grid-auto-columns: 162px;
  gap: 8px;
  overflow-x: auto;
  padding: 8px;
}

.grid-item {
  background-color: #ccc;
}

修改后效果：

• 元素数量少时，自动填满第一行，第二行保持空白
• 元素数量超出一行容量时，剩余元素换行到第二行
• 两行填满后，Grid自动生成新列，元素继续按行填充，触发容器水平滚动

方法二：Flex布局实现（更简洁直观） #

Flex天生适合这种行排列、自动换行的场景，代码更简洁，无需复杂的Grid模板配置：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  max-height: calc(162px * 2 + 8px); /* 限制最多2行：2个单元格高度 + 行间距 */
  overflow-x: auto;
  gap: 8px;
  padding: 8px;
}

.flex-item {
  flex: 0 0 162px; /* 固定宽度，不缩放 */
  height: 162px;
  background-color: #ccc;
}

Flex的优势：

• 无需手动控制列/行流向，自动按行排列并换行
• max-height直接限制最多显示2行，超出后触发水平滚动
• 代码易读，维护成本低

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