subgrid 失效主因是父容器未显式定义轨道、子元素非直接子项或未设 display: grid 和 grid-row/column 占位；需父显式模板、子显式占位且禁用 gap。
为什么 grid-template-rows: subgrid 没生效
浏览器对 subgrid 的解析是“全有或全无”：只要缺一个硬性条件，整条声明就被静默丢弃，computed 样式里 grid-template-rows 直接显示为 none。最常漏掉的三点是：
- 父容器没写
grid-template-rows（只写了grid-auto-rows或靠auto-fit动态生成） - 子元素不是父网格的**直接子项**（中间夹了
display: contents、JS 插入的 wrapper 或 React Fragment） - 子元素漏了
display: grid，只写了grid-template-rows: subgrid
检查时别只看视觉——即使看起来“差不多”，也可能已退化为普通网格，轨道早已错位。
父容器必须显式定义轨道，不能靠 auto-fit 或 minmax()
subgrid 只继承显式模板，不继承任何隐式轨道。下面这些写法会让子元素的 subgrid 完全失效：
.parent { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))); }.parent { grid-auto-rows: 60px; }-
.parent { grid-template-rows: repeat(3, 1fr); }（没命名线，且无固定数）
真正有效的写法必须明确、固定、可索引：
立即学习“前端免费学习笔记（深入）”；
-
.parent { grid-template-rows: auto 1fr auto; }（三行，编号 1/2/3/4） -
.parent { grid-template-columns: [start] 1fr [main] 2fr [end] 300px; }（带命名线，供子层消费）
子元素必须用 grid-row 或 grid-column 显式占位
光写 display: grid 和 grid-template-rows: subgrid 不够。子元素得先成为父网格里的“真实网格项”，否则它只是个普通块级元素，压根没挂到轨道上。
- 必须加
grid-row: 1 / -1或grid-column: 1 / -1（或具体范围），确保它跨越所有目标轨道 - 如果父是三行，子却只写
grid-row: 2，那它只占第二行，subgrid失去上下文，无法对齐头尾 - 禁用
gap：gap会插入隐式轨道，切断父子轨道映射链；如需间距，改用padding或margin
三层嵌套时，孙子元素对齐的是中间层，不是顶层
Subgrid 不穿透。结构是 .list → .card → .content 时：
-
.card设grid-template-rows: subgrid→ 它对齐.list的行线 -
.content再设grid-template-rows: subgrid→ 它对齐的是.card的行线，而.card的行线已由.list定义，但若.card加了gap或grid-auto-rows，轨道就偏移了 - 要让
.content真正对齐.list，.card必须同时声明grid-template-rows: subgrid和grid-template-columns: subgrid，且不能有任何干扰（gap、display: contents、空节点）
命名线冲突也在这里爆发：如果 .list 和 .card 都定义了 [main]，孙子层用 grid-column: main，实际锚定的是 .card 的线，不是 .list 的——命名线不跨层继承，只以最近一层为准。
