CSS Grid 卡片按钮总对不齐：用 subgrid 修复内容高度漂移并保留降级方案

商品列表上线后，最先被用户指出的不是接口慢，而是“同一排卡片的购买按钮像楼梯一样往下掉”。原因通常不是按钮样式，而是每张卡片的标题、卖点和价格行高度各算各的：短标题很快进入操作区，长标题却把价格和按钮整体推低。这个问题可以用 CSS Grid 的 subgrid 收口，但要先看清它继承的到底是哪一组轨道。

按钮为什么会像楼梯一样错开

先用一个最小的商品卡片复现。每张卡片内部有标题、说明、价格和按钮，但卡片之间没有共享行轨道。

.product-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.product-card {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid #dfe5ec;
  border-radius: 14px;
}

.product-card__buy {
  align-self: end;
}

align-self: end 只会让按钮贴近当前卡片的底部，不能让三张卡片拥有相同的“标题行”和“说明行”。当第二张卡片多两行文字时，它自己的底部就会变高，按钮仍然会错开。

先确认是内容高度问题，不要急着改按钮

在浏览器开发者工具里选中 .product-list，打开 Grid 轨道显示，再分别查看三张卡片的行数。如果按钮的纵坐标差异和标题/说明的换行高度一起变化，问题就在卡片内部的独立轨道。把按钮改成绝对定位，或给卡片写死一个高度，只会把新的文本和窄屏场景推到下一个故障点。

把父级轨道交给每张卡片继续使用

subgrid 的关键动作是让卡片加入父级网格的行轨道。父级需要先定义列和行；卡片本身再用 grid-template-rows: subgrid 继承行高。

.product-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto;
  gap: 20px;
  align-items: stretch;
}

.product-card {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  gap: 12px;
  padding: 20px;
  border: 1px solid #dfe5ec;
  border-radius: 14px;
}

.product-card__title,
.product-card__desc,
.product-card__price,
.product-card__buy {
  min-width: 0;
}

.product-card__buy {
  align-self: end;
}

这里的 grid-row: span 4 很重要：它告诉父级，这张卡片要占用标题、说明、价格、操作四条轨道。卡片内部的四个直接子项才会分别落到这四条共享轨道里。若只写 grid-template-rows: subgrid 而不跨过父级行，卡片没有可继承的完整轨道，布局结果仍可能不稳定。

一次改动为什么仍可能在窄屏上复发

桌面端三列卡片通常共享四条轨道，但手机端变成一列后，父级的行定义、卡片跨行数量和断点要一起检查。最稳妥的方式是让不同断点明确声明列数，保持卡片仍然跨过自身的四个内容行。

.product-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .product-list {
    grid-template-columns: 1fr;
  }
}

@supports not (grid-template-rows: subgrid) {
  .product-card {
    display: flex;
    flex-direction: column;
  }

  .product-card__buy {
    margin-top: auto;
  }
}

降级方案的目标不是复制 subgrid 的每一条高度，而是保证阅读顺序和操作入口可用。Flex 的 margin-top: auto 能把按钮推到卡片底部，但只有卡片自身高度已经被父级拉齐时，按钮才会视觉对齐。若产品要求严格的多行内容对齐，可以在降级样式中使用稳定的最小高度，并用真实最长标题做回归测试。

上线前用四个状态复查布局

修复后不要只看一组短标题。把下面四种数据放进同一个列表，打开窄屏和桌面两种视口分别检查。

如果使用自动化截图测试，可以给卡片按钮记录相对列表容器的 getBoundingClientRect().top，同一行的差值应接近 0。不要把浏览器缩放、字体加载失败或图片未预留尺寸造成的偏差误判成 subgrid 问题。

常见问题：subgrid 什么时候值得用

subgrid 是不是只要写在子元素上就行？

不够。父级必须先提供可继承的行或列轨道，子元素还要通过 grid-row 或 grid-column 跨入对应范围。

卡片内容太长时，subgrid 会截断文字吗？

不会。共享轨道会按同一组内容的最大需求扩展；如果产品不允许高度继续增长，应另行设置截断行数和溢出提示。

不支持 subgrid 时要不要放弃这套写法？

不用。用 @supports 保留普通 Grid 或 Flex 降级，并针对长标题、窄屏和键盘操作做一次回归即可。

为什么按钮使用绝对定位不是好办法？

绝对定位脱离了内容流，容易遮挡多行标题、放大字体和本地化文案。它适合明确的叠层按钮，不适合承担卡片行对齐。

这类错位的修复重点不在“把按钮往下推”，而在让同一排卡片共享同一组内容轨道。父级先定义结构，卡片用 subgrid 继承，旧环境再用 Flex 接住，布局才能同时覆盖长文案和窄屏状态。