如何用CSS实现双列图片布局：每列满4张交替新增、尺寸固定且支持横向滚动

不需要修改现有HTML结构，纯CSS基于Grid布局即可实现需求。

实现思路 #

核心利用Grid布局的固定行配置、按列自动填充能力，配合nth-child选择器控制元素所属行，实现每8个元素为一组的排列规则，超出水平可视区域自动滚动，所有图片尺寸统一。

完整代码实现 #

.wrapper {
  display: grid;
  /* 固定为2行布局 */
  grid-template-rows: repeat(2, 1fr);
  /* 按列方向自动填充新元素 */
  grid-auto-flow: column;
  /* 每列宽度固定为可视区域刚好放下4列的尺寸，3为4列之间的间隙数，12px为间隙值可自定义 */
  grid-auto-columns: calc((100% - 12px * 3) / 4);
  /* 图片之间的间距，可自定义 */
  gap: 12px;
  /* 超出水平方向可滚动 */
  overflow-x: auto;
  width: 100%;
  /* 可选：隐藏滚动条 */
  scrollbar-width: none;
}
/* 可选：Chrome系浏览器隐藏滚动条 */
.wrapper::-webkit-scrollbar {
  display: none;
}

.item {
  width: 100%;
  /* 固定图片高度，也可以用aspect-ratio设置固定宽高比，比如aspect-ratio: 16/9 */
  height: 120px;
  object-fit: cover;
}

/* 每8个元素为一组，前4个放在第一行 */
.item:nth-child(8n + 1),
.item:nth-child(8n + 2),
.item:nth-child(8n + 3),
.item:nth-child(8n + 4) {
  grid-row: 1;
}

/* 每8个元素为一组，后4个放在第二行 */
.item:nth-child(8n + 5),
.item:nth-child(8n + 6),
.item:nth-child(8n + 7),
.item:nth-child(8n + 8) {
  grid-row: 2;
}

效果验证 #

• 3张图片：前3个元素匹配第一行规则，第二行无元素，符合预期
• 5张图片：前4个在第一行，第5个匹配第二行规则，符合预期
• 9张图片：1-4在第一行，5-8在第二行，第9个匹配8n+1规则回到第一行，符合预期
• 13张图片：9-12匹配第一行规则放在第一行后续位置，第13个匹配8n+5规则放在第二行后续位置，符合预期

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