CSS Grid布局中部分单元格过高问题求助

你遇到的问题核心是：第一个网格项（跨两行两列）拉高了网格的行高，而第4、5个网格项虽然只设置了grid-column: auto / span 2，但内部图片是正方形比例（原图片为436x436），当元素跨两列时，图片宽度变为两列总宽度，height: auto会让图片高度等于宽度，这个高度刚好匹配前面两行的行高之和，所以视觉上看起来像是占了两行。

修复方案 #

以下几种方法可以解决这个问题：

1. 给网格设置固定行高

给.grid添加固定行高，让每行高度统一，跨列元素的高度也会和单行保持一致：

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 200px; /* 新增固定行高 */
}

2. 给图片设置适配约束

让图片填充容器并保持正方形比例，避免因宽度变化导致高度异常：

img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保图片适配容器，不变形 */
  aspect-ratio: 1; /* 强制保持正方形比例 */
}

3. 完整修复后的CSS示例

结合两种方法的最终代码：

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 200px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.grid>div:nth-child(1),
.grid>div:nth-child(8) {
  grid-row: auto / span 2;
  grid-column: auto / span 2;
}
.grid>div:nth-child(4),
.grid>div:nth-child(5){
  grid-column: auto / span 2;
}

修改后，第4、5个网格项会保持单行高度，同时正常跨两列显示。

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