CSS Grid标题换行致图片错位及响应式列数适配问题

问题描述 #

用CSS Grid做营销页面的产品展示布局，要求宽屏显示3列、移动端显示2列。但产品标题长度不一，部分标题换行后占更多垂直空间，导致同一行内的产品图片上下错位。试过拆分标题与图片为单独行、固定标题高度等方案，要么适配失效要么维护成本高，需要稳定易维护的解决办法。

解决方案 #

核心思路是让每个产品卡片（.grid-item）内部也用Grid布局，把标题和图片拆成独立行，利用Grid自动行高的特性，让同一大Grid行里的所有卡片标题行高度统一，从而保证图片区域的起始位置对齐。

修改后的CSS代码 #

.container {
  width: 60%;
  border: 1px solid black;
  margin: 0 auto;
  padding: 10px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* 移动端适配为2列 */
@media (max-width: 900px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 关键修改：让每个卡片内部成为Grid布局 */
.grid-item {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px; /* 标题与图片的间距，可按需调整 */
}

.grid-item .heading {
  font-size: 1em;
}
.grid-item a {
  display: block;
  aspect-ratio: 1/1;
}
.grid-item .fake-img {
  width: 100%;
  height: 100%;
  background-color: palegoldenrod;
}

方案优势 #

1. 无需改动HTML结构：保留原有的「卡片包含标题+图片」的语义化结构，避免拆分布局带来的维护麻烦。
2. 自动适配标题高度：同一大Grid行内的所有卡片标题行，会自动拉伸到该行最高标题的高度，不用固定死高度，适配各种长度的标题。
3. 兼容响应式切换：原有的移动端媒体查询不用改，布局自动适配2列/3列切换，不会再出现错位。
4. 后续维护简单：新增产品卡片时，不用额外调样式，布局会自动适配。

原理说明 #

• 外层大Grid负责控制列数和整体布局，自动把每行高度调整为该行最高卡片的高度。
• 每个.grid-item内部的Grid布局，把标题放到auto高度的行（自动适配标题内容），图片放到1fr高度的行（占满剩余空间）。
• 因为外层大Grid的行高统一，每个卡片的标题行都会被拉到该行最高标题的高度，自然就保证了图片区域的起始位置完全对齐。

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