使用图片创建可复用网格布局：4×5图片仅填充4行的问题排查

问题原因 #

你当前的CSS选择器逻辑混乱，导致网格行高计算断层，无法紧凑排列元素：

1. .grid img:nth-child(1n) 会选中所有图片，后续的2n/3n/4n选择器只有部分能覆盖它，造成跨行规则混乱。
2. 没有使用稳定的循环布局规则，加上缺少自动填充空白的属性，导致网格出现无法利用的空白区域，最后一行就空了。

修复代码 #

调整选择器逻辑并添加网格自动填充属性：

.grid-image {
  width: 100%; /* 改为自适应列宽，替代固定24em */
  height: auto;
  object-fit: contain;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px;
  grid-auto-flow: dense; /* 自动填充网格空白区域 */
}

/* 按4个元素为循环周期设置跨行 */
.grid img:nth-child(4n+1),
.grid img:nth-child(4n+4) {
  grid-row: span 5;
}
.grid img:nth-child(4n+2),
.grid img:nth-child(4n+3) {
  grid-row: span 4;
}

关键说明 #

• 用4n+x的选择器替代原有混乱的规则，让每4张图片形成一个稳定的布局循环，匹配你想要的错落效果。
• grid-auto-flow: dense会强制网格填充所有可用空间，避免因元素跨行导致的空白断层。
• 将图片宽度改为100%，确保图片自适应网格列宽，不会出现溢出或填充不足的问题。

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