如何使用CSS复现两行横向滚动的目标网格布局？

你遇到的问题核心是Grid默认的列宽规则强制了等宽，改成下面的配置就能搞定：

修改后的CSS代码 #

.grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  /* 让每列宽度跟着子元素走，不再强制等宽 */
  grid-auto-columns: auto;
  gap: 8px;
  /* 开启横向滚动，内容超宽时可以滑动 */
  overflow-x: auto;
  /* 可选：给滚动条留一点空间，避免元素被遮挡 */
  padding-bottom: 8px;
}
.module {
  height: 40px;
  border-radius: 8px;
  background-color: aqua;
  /* 防止子元素被压缩 */
  flex-shrink: 0;
}

为什么这么改？ #

• 删掉原来的grid-template-columns: repeat(auto-fill, minmax(auto, 1fr))，因为这个规则会让所有列强制平分宽度，导致你看到的1和3、3和5之间的多余空白
• grid-auto-columns: auto 会让每列的宽度完全由子元素的设定宽度决定，元素之间不会出现不必要的空隙
• overflow-x: auto 给容器加上横向滚动能力，满足你“更多选项时能滚动”的需求

完整可运行代码 #

<div class="grid">
  <div style="width: 96px;" class="module">1</div>
  <div style="width: 128px;" class="module">2</div>
  <div style="width: 176px;" class="module">3</div>
  <div style="width: 208px;" class="module">4</div>
  <div style="width: 176px;" class="module">5</div>
</div>

这样就能实现你要的效果：两行横向排列，元素保持各自宽度，容器支持横向滚动，没有多余空白。

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