如何解决CSS Grid布局中不同长度文本下方出现多余空白的问题

问题根因 #

你定义的grid-template-rows包含4行高度规则，但实际grid-template-areas只用到了前2行，未被占用的2行就会产生多余空白；同时fr单位是按比例分配容器剩余空间，内容较少时会强制撑开行高，进一步放大空白问题。

修复方案 #

只需要修改.container的grid行定义，匹配实际用到的2行布局即可，同时调整对齐规则避免不必要的拉伸：

.container {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr 0.9fr;
  /* 仅定义实际用到的2行：第一行适配标题高度，第二行自动适配描述内容高度 */
  grid-template-rows: auto minmax(min-content, auto);
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "vehicle-image vehicle-name vehicle-price"
    "vehicle-image vehicle-description vehicle-description";
  margin-bottom: 20px;
}

/* 让图片容器靠上对齐，避免grid默认拉伸占满两行高度 */
.vehicle-image { 
  grid-area: vehicle-image; 
  align-self: start;
}

/* 替换负margin为padding调整间距，避免布局异常 */
.vehicle-description {
  grid-area: vehicle-description;
  padding-top: 8px; /* 可按需调整数值匹配原来的视觉间距 */
  font-size: 0.85em;
}

调整说明 #

• 删掉了原定义中多余的2行规则，直接消除未使用行带来的空白
• 第一行高度设为auto，自动匹配车名、价格的标题高度，不会强制撑高
• 第二行高度设为minmax(min-content, auto)，最小高度为描述文本本身的高度，内容较少时不会出现多余空白，内容较多时自动撑开高度适配
• 给图片容器添加align-self: start，避免grid默认的stretch对齐把图片区域拉伸，进一步减少不必要的空白

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