subgrid是唯一能实现跨卡片像素级对齐的方案；它通过让所有卡片继承父网格的行轨道（如grid-template-rows: auto minmax(60px, 1fr) auto），并令按钮锚定同一轨道线（如grid-row: 3），使不同高度卡片的按钮严格对齐，而常规嵌套grid因轨道独立、无法共享，根本无法做到。
Subgrid 不是“更适合列表布局”，而是唯一能实现跨卡片像素级对齐的方案；常规嵌套 Grid 在列表中根本做不到这点。
subgrid 如何让所有卡片底部按钮严格对齐
列表中每张卡片高度不同，但设计师要求“立即购买”按钮必须落在同一水平线——这不能靠 align-self: end 或 margin-top: auto 实现，它们只在单卡内生效。真正有效的是让所有卡片共享父网格的行轨道：
- 父容器设
grid-template-rows: auto minmax(60px, 1fr) auto，第三行固定为按钮区 - 每张卡片设
display: grid+grid-template-rows: subgrid - 卡片内按钮加
grid-row: 3（即锚定到父网格第 3 条轨道线）
此时按钮位置由父网格统一决定，不随卡片内容增减偏移。
常规嵌套 Grid 在列表里为什么失效
你写一个 .card { display: grid; grid-template-columns: 1fr 2fr; }，它和父列表完全无关：
- 列宽是独立计算的，两张卡片的“2fr”实际像素值可能差 12px
- 无法让卡片 A 的标题和卡片 B 的图标横跨相同列范围
- 响应式切换列数时，子网格必须同步重写，否则错位
-
grid-template-areas在嵌套中直接失效——孙子元素不参与父级区域映射
subgrid 必须满足的两个硬性条件
漏掉任一，浏览器静默退化为普通块级流，且 DevTools 不报错：
- 父容器必须显式声明
grid-template-columns或grid-template-rows（grid-auto-columns不算） - 子元素必须是直系子项，且自身设
display: grid或display: subgrid，再写grid-template-columns: subgrid
常见误判是把 display: subgrid 当成开关，其实它只是语法糖，底层依赖父级轨道定义是否真实存在。
为什么三层以上嵌套仍用 subgrid 是陷阱
列表本身是父网格，卡片是子网格，卡片内部若再套一层网格并启用 subgrid，就变成三层继承：
- Chrome DevTools 的 Layers 面板会出现多层重叠的 “Grid Overlay”
- 滚动时频繁触发轨道重计算，尤其当父网格用了
minmax()或repeat(auto-fit, ...) - 静态内容（如卡片底部版权文字）没必要 subgrid，纯属增加解析负担
真正需要 subgrid 的只有那些必须跨卡片对齐的节点：表单字段组、仪表盘指标、带图标的操作栏——其余一律用单层 Grid 或 Flex。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
