subgrid生效需父容器显式定义grid-template-rows/columns、子元素为直接子项且设display: grid与明确grid-row/column范围。隐式轨道、dom嵌套、缺span声明或中间层gap均导致失效。
写了 grid-template-rows: subgrid 却没对齐？不是语法错了，是父容器根本没给它继承的资格——Subgrid 不是开关，而是有硬性准入条件的轨道继承指令。
父容器必须显式定义 grid-template-rows/columns
浏览器只认“明确定义的轨道”，不继承 grid-auto-rows、gap 或 repeat(auto-fit, ...) 生成的隐式轨道。
-
grid-template-rows: auto 1fr auto✅ 可被子元素用subgrid继承 -
grid-template-rows: repeat(3, auto)✅ 显式重复，也有效 -
grid-auto-rows: 100px❌ 没有模板，subgrid直接失效 -
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))❌ 动态列数无显式轨道，subgrid被静默丢弃
开发者工具里检查 computed 样式，如果 grid-template-rows 解析为 none，说明整条声明已被忽略。
子元素必须是父网格的直接子项
DOM 层级断了，Subgrid 就断了。任何中间包装都会让继承失效。
-
<div class="parent"><div class="child-grid"></div></div>✅ 正常生效 -
<div class="parent"><div style="display: contents"><div class="child-grid"></div></div></div>❌.child-grid不是直接子项，subgrid不触发 -
<div class="parent"><div class="wrapper"><div class="child-grid"></div></div></div>❌ 同样失效，除非去掉.wrapper或让它设grid-column: 1 / -1并参与父网格布局
子元素自身需设 display: grid + 显式 span 范围
subgrid 是继承轨道，不是自动铺满。子元素得明确告诉父网格：“我要占几行几列”。
- 父设
grid-template-rows: auto 1fr auto（共 3 行 → 行线编号 1/2/3/4） - 子元素必须设
grid-row: 1 / -1或grid-row: span 3，否则可能只占默认单行，导致孙辈定位错位 - 只写
grid-template-rows: subgrid不够，漏掉grid-row范围，孙辈用grid-row: 2会锚定到错误位置
常见现象：标题和按钮看起来“对不齐”，其实是子网格没 span 全部轨道，孙辈元素被挤到隐式行里去了。
三层嵌套时 subgrid 不穿透，中间层必须干净
结构为 .list → .card → .content 时：.card 设 subgrid 对齐的是 .list 的轨道；.content 再设 subgrid，对齐的是 .card 的轨道，不是 .list 的。
- 想让
.content也对齐顶层，.card必须同时设grid-template-rows: subgrid且禁用gap、grid-auto-rows -
.card加了gap: 8px→ 插入隐式轨道 →.content的grid-row: 2指向的是中间层新增的行线，而非原始父轨道 - 响应式下不要在子层写
@media改grid-template-columns，那等于放弃subgrid，变成独立网格
真正难的不是写 subgrid，是保持每一层父容器轨道定义明确、无干扰、无隐式插入——这比写样式更像在维护契约。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
