如何用CSS子网格Subgrid提升响应式对齐效果？

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。

1. 必须显式声明，比如 grid-template-rows: auto 1fr auto 或 grid-template-columns: [start] 200px [main] 1fr [end]
2. 验证是否生效：Chrome DevTools → Layout 面板 → 勾选 “Show line names”，实线轨道才可被继承
3. 别混用 grid-template-areas 和 subgrid：area 名称不等于轨道线，subgrid 不认 area

子元素自己加了 @media 覆盖 grid-template-columns，就等于主动切断继承链

父容器在 @media (min-width: 768px) 里把列数从 1 改成 3，这是 OK 的；但如果子元素在同一断点里写了 grid-template-columns: 1fr 1fr，那它的 subgrid 就彻底失效——浏览器只会执行最后匹配的声明。

1. 子元素该写的是 grid-template-columns: subgrid，且全程不带任何媒体查询覆盖
2. 兼容 fallback（如 @supports not (grid-template-columns: subgrid)）必须严格隔离：支持 subgrid 的分支里，子元素不能残留任何 grid 定义
3. 响应式调整只应在父容器做，子元素只负责锚定（grid-row: 3）、跨度（grid-column: span 2）或继承（subgrid）

想跨卡片对齐按钮？别用 align-self: end，得靠 grid-row 锚定父行线

单个卡片内用 margin-top: auto 或 align-self: end 把按钮推到底部，只能保证它在自己卡片里位置固定；但不同卡片内容高度不同，它们的“底部”物理位置根本不在同一水平线。

1. 父容器定义 grid-template-rows: auto minmax(60px, 1fr) auto（头 / 主体 / 尾）
2. 每个卡片设 grid-template-rows: subgrid，不定义新行
3. 按钮加 grid-row: 3，强制落在父网格第三行 —— 所有按钮自然共线
4. 这个逻辑不依赖卡片自身高度，也不需要 JS 计算或 min-height 硬撑

真正难的不是写对那几行 CSS，而是克制住“在子元素里再定义一遍网格”的本能。Subgrid 的有效边界非常清晰：父定义轨道，子只挂载、不重建、不覆盖。一旦中间层开始自作主张，对齐就又回到靠 JS 或硬高维持的老路。