subgrid不是自动对齐开关，仅当父容器显式定义轨道、子元素为直接子项且双轴均声明subgrid时才生效；常见失效源于中间层漏写subgrid或引入gap破坏轨道连续性。
Subgrid 不是“开了就能对齐”的开关，它只在父容器显式定义轨道、子元素为直接子项、且双轴（列/行）都声明 subgrid 时才真正生效；多数错位问题其实源于中间层漏写 grid-template-rows: subgrid 或偷偷引入了 gap。
为什么写了 display: grid 却没继承父列宽？
子元素仅设 display: grid，不等于自动接入父轨道——它会新建一套独立网格。必须显式写 grid-template-columns: subgrid，且父容器不能只靠 repeat(auto-fit, ...) 或 grid-auto-columns 生成隐式列。
- ✅ 正确：父容器定义
grid-template-columns: [label] 120px [content] 1fr [action] max-content - ❌ 错误：父容器只写
grid-template-columns: repeat(3, 1fr)—— 没命名线，子元素无法用grid-column: content锚定 - 浏览器静默丢弃无效
subgrid声明，computed样式中grid-template-columns显示为none而非报错
三层嵌套时孙子元素为何对不齐顶层列线？
Subgrid 只作用于**直接子元素**。孙子层默认对齐的是中间层的轨道，不是顶层。想穿透对齐，中间层必须同时满足两个硬性条件：
- 中间层（如
.list-group）必须设display: grid，且同时声明grid-template-columns: subgrid和grid-template-rows: subgrid - 中间层禁止使用
gap、grid-auto-rows、空<div></div>或任何可能插入隐式轨道的属性 - 若中间层写了
grid-column: span 2，其子元素的列索引整体右移，grid-column: content就会锚错位置
响应式切换后 Subgrid 突然失效？
Subgrid 继承链非常脆弱，媒体查询一旦在子元素上重写 grid-template-columns，或父容器在断点里改用 auto-fit，继承就立即中断。
- ✅ 正确做法：所有响应式调整集中在父容器，例如
@media (min-width: 768px) { .list { grid-template-columns: 1fr 2fr 1fr; } } - ❌ 错误做法：在
.list-item上加@media并设grid-template-columns: 1fr 1fr—— 这等于主动放弃继承 - 移动端小屏下不要用
visibility: hidden或opacity: 0隐藏子项，它们仍占 DOM 空间，影响subgrid的轨道映射；应统一用display: none
真正难控的不是语法，而是轨道连续性：一个未察觉的 gap: 4px、一段被忽略的空文本节点、甚至 JS 动态插入时多套了一层 wrapper，都可能悄悄插入隐式轨道，让整个对齐链断裂。调试时务必打开 Chrome DevTools 的 Grid Inspector，勾选 “Show line names”，确认命名线来源是否确实是顶层容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
