subgrid失效的根本原因是父容器未显式定义grid-template-rows/columns且子元素非直接子项；必须满足父设display: grid并显式声明轨道、子为直接子元素且自身display: grid，缺一不可。
grid-template-rows: subgrid 或 grid-template-columns: subgrid 多数时候根本没生效——不是语法写错，而是父容器压根没给它“继承”的资格。
为什么写了 subgrid 却完全没对齐？
浏览器对 subgrid 的校验极其严格，声明被静默丢弃是常态。常见失效场景包括：
- 父容器只设了
display: grid和gap: 12px，但没写grid-template-rows或grid-template-columns—— 没有显式轨道，就无“子”可继 - 父容器用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))，这生成的是隐式轨道，subgrid不认 - 子元素被包在
display: contents容器里，DOM 层级上已不是父网格的直接子项 - 开发者工具里检查 computed 样式，发现
grid-template-rows解析为none，说明整条声明已被忽略
父容器必须满足的两个硬性条件
想让 subgrid 生效，父容器必须同时满足：
-
display: grid（不能是inline-grid） - 显式定义
grid-template-rows或grid-template-columns，例如：grid-template-rows: auto 1fr auto或grid-template-columns: 1fr 2fr 1fr
注意：grid-template-rows: subgrid 50px 这类混写会直接导致整条声明失效；也不能只靠 grid-auto-rows 或 grid-row-gap 代替轨道定义。
子元素内部如何真正锚定父轨道线？
启用 grid-template-rows: subgrid 后，子元素自身仍是网格容器，它的子元素（即孙辈）可直接使用父级行线编号定位：
- 父容器定义三行：
grid-template-rows: auto 1fr auto→ 行线编号为1 / 2 / 3 / 4 - 子元素设
grid-template-rows: subgrid，不改变编号体系 - 孙辈元素如
.title写grid-row: 1，.body写grid-row: 2，就自动落在同一视觉行区间内
不需要计算像素高度，也不用重复定义尺寸，但前提是父轨道必须有明确高度空间（比如 1fr 或固定值），否则 auto 轨道可能塌缩导致视觉无效果。
三层嵌套时 subgrid 的作用域边界在哪？
subgrid 不跨级穿透。结构为 .list → .card → .content 时：
-
.card设grid-template-rows: subgrid→ 它对齐的是.list的行轨道 -
.content再设grid-template-rows: subgrid→ 它对齐的是.card的行轨道，不是.list的 - 若要“穿透”对齐顶层，中间层
.card必须同时声明grid-template-rows: subgrid且禁用gap、grid-auto-rows等任何引入隐式轨道的操作
响应式断点中，只要父容器的 grid-template-columns 在媒体查询里被重写（比如从 1fr 1fr 改成 1fr），子元素的 subgrid 就立刻 fallback 成 none —— 轨道定义不稳定，继承就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
