grid-template-rows: subgrid没效果是因为浏览器静默丢弃该声明（计算值为none），必须同时满足：父容器显式定义grid-template-rows、子元素为真实直系DOM子项、子元素设display: grid且grid-row: span N（N=父轨道行数）。
为什么 grid-template-rows: subgrid 没效果？
不是语法写错，是浏览器压根没让它生效——subgrid 声明被静默丢弃后，计算值显示为 none，子元素退化成普通块级流。
必须同时满足三个硬性条件：
- 父容器显式定义
grid-template-rows（如auto 1fr auto或repeat(3, minmax(0, 1fr)))），不能只靠grid-auto-rows或repeat(auto-fit, ...) -
subgrid元素必须是父网格的**真实 DOM 直系子项**，中间不能有display: contents、fieldset、或任何仅用于包裹的<div class="wrapper"> <li>子元素自身要设 <code>display: grid，且必须配合grid-row: span N（N = 父轨道总行数）或grid-row: 1 / -1，否则只占单行，孙辈定位全乱 - .card 同时声明
grid-template-columns: subgrid和grid-template-rows: subgrid - .card 禁用
gap、grid-auto-rows、grid-auto-columns - .card 不能有空子节点或语义包裹层（比如
<div></div>或<span></span>包着 .content） - .content 内部元素可直接用
grid-column: 2或grid-row: 3，它现在看到的就是 .list 的原始轨道编号 - 外层用
grid-template-columns: [nav] 250px [main] 1fr定义命名线 - 中间层设
grid-template-columns: subgrid并grid-column: main / -1 - 孙子元素直接用
grid-column: nav或grid-column: main锚定顶层命名线 - ✅ 正确：
@media (min-width: 768px) { .list { grid-template-columns: 1fr 2fr 1fr; } } - ❌ 错误：
@media (min-width: 768px) { .card { grid-template-columns: subgrid; } }—— 这行声明本身无意义，subgrid不是响应式开关 - ❌ 更危险：
@media (min-width: 768px) { .card { grid-template-columns: 1fr 1fr; } }—— 主动覆盖继承，subgrid彻底失效
如何让孙子级元素对齐顶层网格线？
Subgrid 不穿透两层。.list → .card → .content 这种结构里，.content 对齐的是 .card 的轨道，不是 .list 的。
想让 .content 直接锚定顶层列线或行线，中间层 .card 必须也启用 subgrid，并清除干扰：
立即学习“前端免费学习笔记（深入）”；
subgrid 能和 grid-template-areas 一起用吗？
不能。区域命名（grid-template-areas）不穿透层级，孙子元素无法参与父级区域映射。
例如外层定义了 "header header" "nav main"，内层容器即使写了 grid-area: main，它的子元素也不会自动落入 main 区域内部。
替代方案是放弃区域系统，改用轨道继承：
响应式断点下 subgrid 失效怎么办？
Subgrid 继承链在媒体查询中极其脆弱：只要父容器或子元素任一方在断点里重写 grid-template-columns 或改用 auto-fit，继承就中断。
安全做法只有一条：所有轨道定义集中到最外层容器，子元素不参与响应式重定义：
真正容易被忽略的是：Chrome/Firefox 的 Grid Inspector 中勾选 “Show line names”，能一眼看出当前元素看到的列线名来自哪一层——这是调试 subgrid 是否穿透成功的最快方式。
