CSS subgrid 对齐嵌套卡片内容的实现

让嵌套卡片的标题、描述和操作链接分别对齐，可以把卡片设为父 Grid 的网格项，让每张卡片跨越三条行轨道，再写 grid-template-rows: subgrid。同一排卡片因此共用对应的行尺寸，长标题撑高标题所在的共享轨道，描述和操作区便能保持对齐。

规范入口：https://www.w3.org/TR/css-grid-2/

内容输入：先定义卡片的三个槽位

本文以资料卡为例，每张卡片依次包含标题、说明和阅读链接。问题往往从内容进入页面时出现：一张标题只有一行，另一张需要三行；如果每张卡片都是独立 Grid，它们会各自计算内部行高，卡片外框等高也不代表内部段落对齐。

先规定三个稳定槽位，再选择布局。不要为了视觉齐整截断真实标题，也不要依赖一个固定标题高度容纳所有语言。下面 HTML 放在页面 body 内，配合后面的 CSS 使用。链接是同页锚点，页面下方给出对应说明区域。

布局基础
    
理解网格容器与直接子项的关系。
    阅读布局说明
  
多语言长标题与响应式卡片内容对齐
    
标题换行后，说明区域仍使用对应的共享行轨道。
    阅读内容说明
  
布局说明
卡片共享行轨道。
内容说明
内容决定轨道所需高度。

轨道模型：让父网格管理可共享的尺寸

父容器负责决定一排能放几张卡片。每张卡片占一列、跨三行，下一排卡片会使用下一组行轨道。这里要共享的是行，因此声明 rows 为 subgrid 即可；把 columns 设为 subgrid 并不能解决标题换行导致的纵向错位。

/* 基础样式保留为不支持 subgrid 时的可读降级。 */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
  align-items: stretch;
}
.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid #d5dbe3;
  border-radius: 0.75rem;
}
.card > h2,
.card > p {
  margin: 0;
  overflow-wrap: anywhere;
}
.card > a {
  align-self: start;
  justify-self: start;
}
@supports (grid-template-rows: subgrid) {
  .card {
    /* 三个内容槽位对应父容器中连续的三条行轨道。 */
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
  .card > h2 { grid-row: 1; }
  .card > p { grid-row: 2; }
  .card > a { grid-row: 3; }
}

本例没有为父容器写固定行高，按内容建立所需的隐式行。subgrid 的内容会参与相关父轨道的尺寸计算，不必事先知道最高标题有几行。代码是供读者使用的布局示例，本文没有把浏览器渲染结果作为实测证据。

定位关系：span 3 与局部行号必须配套

grid-row: span 3 描述卡片在父网格上的跨度；卡片内部的 grid-row: 1、2、3 则在自己的子网格坐标内定位。它们不应被理解为文档全局行号。多排卡片各用自己的三行区域，本例并不要求第一排与第二排标题具有相同高度。

只加 subgrid 却没有足够跨度，不能凭空得到三个可用行槽位；只让卡片跨三行、内部仍使用独立行模板，也不会得到内部共享尺寸。排查时应把父级跨度和子级轨道声明当作一个布局契约。

本例让父与子都用 1rem gap，便于理解。subgrid 默认可沿用父网格相应方向的间距，也允许覆盖；覆盖会改变子项与共享网格线附近的空间关系，不能简单推断“设置任意 gap 后所有边缘位置仍不变”。

异常内容：缺字段与额外包装层怎样处理

如果某张资料卡没有说明，最稳妥的做法是保留说明槽位并给出有意义的“暂无说明”，或者通过明确行定位让链接仍占操作行。不要仅依赖自动放置，否则删除中间节点后，后续节点可能占据原本属于说明的行。

如果组件框架额外插入 .card-body 包装层，标题就不再是 card 的直接网格项，上面的子项选择器也不再匹配。可以减少无意义的包装；确有语义或组件需要时，应把这一层也设计成跨相应轨道的子网格，再定位它的直接子项，不能假设 Grid 自动穿透所有 DOM 层。

长 URL 或连续字符可能撑开列宽，因此示例同时用了 min-width: 0 与 overflow-wrap。图片若后来加入卡片，也要重新定义槽位数量、跨度和尺寸约束；三行示例不能无修改地承载四个独立区域。字号、缩放和语言改变会改变内容高度，这是共享轨道需要适应的输入。

降级与清理：保留可读布局，移除旧补丁

能力检测分支使不支持 subgrid 的环境保留独立卡片 Grid。降级版本保证阅读与链接可用，但不承诺说明区跨卡片精确对齐。目标浏览器范围应由项目自身决定，不把语法检测等同于所有复杂内容组合都已适配。

迁移后清理标题固定高度、负边距、绝对定位按钮和旧的 JS 测高代码，避免它们继续干预轨道计算。先明确每项规则的用途，再移除被共享轨道替代的部分；如果旧规则仍承担特殊业务布局，不应不加区分全部删除。

subgrid 能自动跨多个独立父容器对齐吗？

不能。这里共享的是所属父网格覆盖范围内的轨道。要跨两组容器对齐，必须先重审它们是否应属于同一布局上下文。

卡片只有一列时还需要它吗？

单列时没有同排兄弟卡片需要比较高度，subgrid 的对齐收益较小；本例仍可保留统一规则，也可以按产品需要在窄屏简化。

是否必须同时共享行和列？

不必。标题、说明与链接的纵向对齐只需要共享行。列是否共享应由横向字段布局需求决定。

参考：MDN Subgrid 指南、CSS Grid Layout Level 2。