Subgrid 仅在父容器显式定义 grid-template-rows/columns 时生效，子元素必须用 subgrid 继承且不可覆盖；否则无效或失效。
Subgrid 本身不“提升”对齐效果，它只在父网格轨道定义明确、子级不干扰继承的前提下，让跨容器对齐成为可能。用错地方反而会让布局更乱。
父容器没写 grid-template-rows 或 grid-template-columns，subgrid 就是无效值
浏览器不会推导、猜测或 fallback。如果父容器只靠 grid-auto-rows: minmax(100px, auto) 或 grid-auto-flow: column 构建网格，那 grid-template-rows: subgrid 会直接报 Invalid property value，DevTools 里看到的 computed 值是 none。
- 必须显式声明，比如
grid-template-rows: auto 1fr auto或grid-template-columns: [start] 200px [main] 1fr [end] - 验证是否生效：Chrome DevTools → Layout 面板 → 勾选 “Show line names”，实线轨道才可被继承
- 别混用
grid-template-areas和subgrid：area 名称不等于轨道线，subgrid 不认 area
子元素自己加了 @media 覆盖 grid-template-columns，就等于主动切断继承链
父容器在 @media (min-width: 768px) 里把列数从 1 改成 3，这是 OK 的；但如果子元素在同一断点里写了 grid-template-columns: 1fr 1fr，那它的 subgrid 就彻底失效——浏览器只会执行最后匹配的声明。
- 子元素该写的是
grid-template-columns: subgrid，且全程不带任何媒体查询覆盖 - 兼容 fallback（如
@supports not (grid-template-columns: subgrid)）必须严格隔离：支持 subgrid 的分支里，子元素不能残留任何 grid 定义 - 响应式调整只应在父容器做，子元素只负责锚定（
grid-row: 3）、跨度（grid-column: span 2）或继承（subgrid）
想跨卡片对齐按钮？别用 align-self: end，得靠 grid-row 锚定父行线
单个卡片内用 margin-top: auto 或 align-self: end 把按钮推到底部，只能保证它在自己卡片里位置固定；但不同卡片内容高度不同，它们的“底部”物理位置根本不在同一水平线。
立即学习“前端免费学习笔记（深入）”；
- 父容器定义
grid-template-rows: auto minmax(60px, 1fr) auto（头 / 主体 / 尾） - 每个卡片设
grid-template-rows: subgrid，不定义新行 - 按钮加
grid-row: 3，强制落在父网格第三行 —— 所有按钮自然共线 - 这个逻辑不依赖卡片自身高度，也不需要 JS 计算或
min-height硬撑
真正难的不是写对那几行 CSS，而是克制住“在子元素里再定义一遍网格”的本能。Subgrid 的有效边界非常清晰：父定义轨道，子只挂载、不重建、不覆盖。一旦中间层开始自作主张，对齐就又回到靠 JS 或硬高维持的老路。
