subgrid不是开关，需父容器明确定义轨道、子元素为直接子项且显式声明grid-template-rows/columns: subgrid及span范围；漏任一条件即失效。
Subgrid 不是“开了就能用”的开关，它只在父容器明确定义轨道、子元素为直接子项、且显式声明继承范围时才生效。漏掉任一条件，对齐就失效。
为什么写了 grid-template-rows: subgrid 却没对齐？
最常见原因是父容器根本没提供可继承的轨道——浏览器只认 grid-template-rows 或 grid-template-columns 的显式声明，不认 grid-auto-rows、gap、repeat(auto-fit, ...) 这类隐式生成的轨道。
-
grid-template-rows: auto 1fr auto✅ 可被继承 -
grid-template-rows: repeat(3, 100px)✅ 显式重复，有效 -
grid-auto-rows: 100px❌ 没有模板，subgrid静默退化为none -
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))❌ 动态列数无固定轨道线，subgrid不触发
检查开发者工具的 computed 样式：若 grid-template-rows 解析为 none，说明整条声明已被忽略，不是语法错，而是父级没资格提供轨道。
子元素必须是父网格的直接子项，且自身设 display: grid + grid-row/column 范围
subgrid 是轨道继承指令，不是自动铺满行为。它要求子元素同时满足三个硬性条件：
- DOM 层级上必须是父网格的**直接子元素**（
<div class="parent"><div class="child-grid"></div></div>） - 不能用
display: contents或中间 wrapper 包裹，否则.child-grid就不再是父网格项 - 子元素自身必须设
display: grid，并明确指定占位范围，例如：grid-row: 1 / -1或grid-row: span 3；只写grid-template-rows: subgrid不够，孙辈元素会锚定到默认单行，导致错位
三层嵌套时，孙子层不会自动对齐顶层——中间层必须也是 subgrid
Subgrid 不穿透，只作用于直接父子关系。结构如 .list → .card → .content 时：
-
.card设grid-template-rows: subgrid→ 对齐的是.list的轨道 -
.content再设grid-template-rows: subgrid→ 对齐的是.card的轨道，不是.list的 - 想让
.content也对齐顶层，.card必须同时设grid-template-rows: subgrid且禁用gap、grid-auto-rows、空节点等干扰项，否则轨道链就断了
命名线（如 [icon]）能否被孙辈正确引用，取决于中间层是否干净、是否完整继承了顶层轨道线编号。
响应式下别在子层改轨道，响应逻辑必须由父容器驱动
Subgrid 本身不响应，它只是镜像父级轨道。一旦你在子元素里写 @media 并修改自己的 grid-template-columns，继承就中断，它立刻变成独立网格。
- ✅ 正确：所有媒体查询只写在父容器上，例如
@media (min-width: 768px) { .parent { grid-template-columns: 1fr 2fr 1fr; } } - ❌ 错误：在
.child-grid里写@media (min-width: 768px) { grid-template-columns: 1fr 1fr; } - 若需不同断点下不同对齐粒度（如 PC 对齐 4 列、移动端对齐 2 列），应拆成两个独立父容器，而非强求单个
subgrid自适应
真正容易被忽略的点是：轨道继承不是“一次设置永久生效”，它是动态绑定的——父容器轨道变了，子层自动同步；但父容器轨道定义一旦失效（比如被媒体查询覆盖成 auto-fit），子层的 subgrid 就当场掉线，且不报错、不警告，只默默回退到普通网格行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
