CSS subgrid对齐嵌套卡片标题与按钮区域

多列卡片最常见的错位，通常不是按钮样式造成的，而是每张卡片都有自己独立的行高：标题长短不同，正文段落数量不同，底部按钮自然无法对齐。CSS subgrid 的解决方式是让卡片继续作为父网格的子项，同时在行方向继承父网格轨道。父网格负责列和间距，卡片负责跨过三行，标题、正文、按钮就能共享同一套行尺寸。

先让父网格拥有稳定的卡片列

父网格不需要知道每张卡片内部的具体文案，只负责列数、最小宽度和间距。下面的写法把卡片放进响应式列中，并让每个网格项至少占据三条隐式行；代码里的中文注释说明了轨道的职责。

.card-list {
  display: grid;
  /* 列宽不足时自动换列，避免卡片被压成窄条 */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  /* 标题、正文、按钮分别使用一条父级行轨道 */
  grid-auto-rows: auto;
  gap: 24px;
}

这里的关键不是把三行写死在 grid-auto-rows 中，而是让卡片在父网格中明确跨越三行。父级行会根据参与布局的内容计算尺寸，后面的 subgrid 才有可继承的轨道。

让嵌套卡片共享标题、正文和按钮行

卡片本身既是父列表的网格项，也是标题、正文、按钮的网格容器。grid-row: span 3 把它放到连续三行，grid-template-rows: subgrid 再把这三条父级轨道传给卡片内部。

.card {
  display: grid;
  /* 让每张卡片参与父网格的三条行轨道 */
  grid-row: span 3;
  /* 不重新估算行高，直接继承父级轨道 */
  grid-template-rows: subgrid;
  gap: 12px;
  padding: 20px;
  border: 1px solid #d9e2f0;
  border-radius: 16px;
  background: #fff;
}

.card__title { margin: 0; }
.card__body { margin: 0; }
.card__action {
  /* 按钮落在第三条共享行的末端 */
  align-self: end;
}

卡片的直接子元素按源码顺序进入三条共享行：标题进入第一行，正文进入第二行，操作区进入第三行。最长标题会抬高第一行，其他卡片也会使用相同的第一行高度；正文和按钮区域因此分别对齐。不要把 subgrid 写在任意后代元素上，只有跨父级轨道的那个卡片容器才有继承关系。

gap、内边距和窄屏布局要分开处理

gap 是网格轨道之间的间距，padding 是卡片边框到内容的内距，两者不要混成一个“补偿值”。卡片内部可以覆盖继承来的间距，但不应通过负边距把按钮硬推到同一位置。

@media (max-width: 720px) {
  .card-list {
    /* 窄屏减少列数，保持卡片内容可读 */
    grid-template-columns: 1fr;
  }
}

@supports not (grid-template-rows: subgrid) {
  .card {
    /* 旧环境仍显示内容，只放弃跨卡片行对齐 */
    grid-row: auto;
    grid-template-rows: auto 1fr auto;
  }
}

降级规则的目标是“能读、能点”，不是伪造 subgrid 的对齐效果。支持 subgrid 的环境中，父级行尺寸会结合卡片内容参与计算；不支持时，1fr 只能让单张卡片内部尽量把按钮推到底部，不能让相邻卡片共享行高。

用这张清单判断是否真的对齐

如果按钮仍然上下不齐，先检查卡片是否真的跨越了父网格的三条轨道，再检查标题、正文和按钮是否是直接子项。最后才处理颜色、圆角和视觉间距；这些样式不会改变 subgrid 的继承关系。

常见问题

subgrid 能不能同时继承列和行？

可以，分别在 grid-template-columns 和 grid-template-rows 使用 subgrid。本文只需要跨卡片对齐内容高度，所以只继承行。

为什么写了 subgrid 但按钮没有对齐？

最常见原因是卡片没有跨父级行，或者按钮不是卡片的直接网格子项。先从网格层级和 grid-row 检查。

subgrid 会让每张卡片高度完全一样吗？

它让共享轨道的尺寸一致，但卡片是否占满高度还受父网格的对齐方式、内容和边框盒模型影响；不要把它理解为固定高度。