按钮底部对齐失败主因是父容器未显式定义带命名线的grid-template-rows或子卡片漏写grid-row: span N；Subgrid仅继承显式轨道，不支持隐式推断，且要求子项为直接DOM子元素并严格匹配行数。
按钮底部对齐失败，几乎全是父容器没写 grid-template-rows 或子卡片漏了 grid-row: span N —— Subgrid 不会自动“猜”你要继承几行，它只认显式声明的轨道和明确跨度。
父容器必须显式定义带命名线的行轨道
只设 display: grid、gap 或 grid-auto-rows，Subgrid 会静默失效。浏览器计算样式中 grid-template-rows 显示为 none 就是铁证。
- ✅ 正确写法：
grid-template-rows: [title] auto [body] 1fr [footer] auto—— 命名线确保锚点稳定，auto和1fr混用保留内容自适应能力 - ❌ 错误写法：
grid-template-rows: repeat(4, auto)—— 不生成命名线，断点切换列数后索引错位；grid-auto-rows: auto—— 隐式轨道不可继承 - 行数必须覆盖所有卡片可能出现的区块：哪怕某张卡没有副标题，也要为它预留
[subtitle] auto这一行位置
子卡片必须是直接子项且显式占满全部轨道
Subgrid 只作用于父容器的**直接 DOM 子元素**。任何中间 wrapper（比如 Vue 的 <transition></transition>、React 的 Fragment 包裹、或 display: contents 层）都会切断继承链。
- 子卡片需同时声明：
display: grid+grid-template-rows: subgrid+grid-row: span 4（数字必须与父容器行数严格一致） - 漏掉
grid-row: span 4是高频错误：子卡片若只占 3 行，第 4 行（如[footer]）就无法被内部按钮锚定，按钮会掉进隐式轨道 - 卡片内部按钮写
grid-row: footer才能真正落在父级定义的底部轨道里；写grid-row: 4在响应式列数变化时会偏移
DOM 和样式干扰会让对齐“看起来有效实则失效”
按钮视觉上似乎到底部了，但换一张长标题卡片就错位？大概率是这些隐形干扰在起作用：
立即学习“前端免费学习笔记（深入）”；
- 卡片之间存在空文本节点、HTML 注释或未隐藏的
<div></div>—— Grid 把它们当子项，悄悄占用一行，后续卡片的grid-row锚点整体下移 - 用
visibility: hidden隐藏副标题 —— 它仍占 DOM 空间和轨道；应改用display: none - 卡片上加了
padding或gap—— 它们撑开内部空间，导致按钮实际渲染位置偏离轨道边界 - 媒体查询在子卡片上重写了
grid-template-rows—— 一旦自己定义轨道，继承立刻中断；所有断点调整必须只在父容器上做
最易被忽略的一点：Subgrid 对轨道连续性极其敏感，一个换行符、一段注释、一次 JS 动态插入时多套的 wrapper，都可能让整条对齐链断裂。检查时优先打开浏览器 Grid Inspector，勾选 “Show line names”，确认命名线是否来自顶层容器 —— 不是这个，就别指望按钮真能对齐。
