subgrid 失效的根本原因是结构或声明未达标：仅在直接父子网格间生效，需父容器显式定义命名轨道、子元素为直系子项、明确 span 范围，且响应式下须保持轨道语义连续。
grid-template-columns: subgrid 没反应？不是语法错，是结构或声明没达标——Subgrid 本身不支持“跨组件”对齐，它只在**直接父子网格容器之间**生效。所谓跨组件，本质是跨 DOM 层级或样式作用域，必须靠结构收敛和轨道透传来模拟。
父容器没定义显式命名轨道，subgrid 就静默失效
浏览器只认 grid-template-columns 或 grid-template-rows 的显式声明，不继承 gap、grid-auto-columns 或 repeat(auto-fit, ...) 生成的隐式轨道。
- ✅ 正确：
grid-template-columns: [label] 120px [control] 1fr [helper] max-content（带命名线，显式三列） - ✅ 可行：
grid-template-columns: 1fr 2fr 1fr（无命名线但列数固定，子项可用grid-column: 1 / -1占满） - ❌ 失效：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))（DevTools 中 computed 值为none） - ⚠️ 注意：写了
display: grid和gap不等于有了轨道——必须加grid-template-columns才给 subgrid “继承资格”
子元素不是父网格的直接子项，subgrid 链路就断了
DOM 层级中断，Subgrid 就失效。中间任何一层 wrapper、display: contents 或非 grid 容器都会切断继承。
- ❌ 无效结构：
<div class="editor"><div class="block-wrapper"><div class="block"></div></div></div>——.block不是.editor的直接子项 - ✅ 正确做法：删掉
.block-wrapper，让所有可拖拽区块（如.block-title、.block-rich-text）直接作为.editor的子元素 - ⚠️
display: contents不是透传 magic：它让父元素“视觉上消失”，但不会让孙辈变成父网格的真实子项；.block仍需自身是display: grid容器，且是父网格的直系子节点
子网格没设 span 范围，孙辈定位就错位
grid-template-columns: subgrid 只是“申请继承”，不自动铺满。子元素必须明确告诉父网格：“我要占哪几列”。否则默认 grid-column: auto，只占单列，破坏对齐链。
- 父容器列线编号为
1 / 2 / 3 / 4（三列），子区块必须设：grid-column: 1 / -1或grid-column: span 3 - 若只写
grid-column: 2 / 3，它只占中间一列，导致标签和输入框挤在一起 - 内部子元素（如
label、input）可直接用命名线：label { grid-column: label; }、input { grid-column: control; }，无需再算宽度或 margin - 三层结构（编辑器 → 区块 → 工具栏）要穿透对齐，中间区块必须同时设
grid-template-columns: subgrid和grid-template-rows: subgrid，且禁用gap、grid-auto-rows
响应式下轨道语义断裂，subgrid 继承就失效
在媒体查询里重写整个 grid-template-columns，会导致子网格继承中断——它拿到的是新轨道，不是原语义列线。
- ✅ 推荐做法：用弹性轨道定义，例如
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))在宽屏下生成 3 列，在窄屏下生成 1 列，但逻辑列数始终可推导 - ⚠️ 更稳方案：用
minmax()+ 固定命名线，如grid-template-columns: [left] minmax(280px, 1fr) [main] minmax(0, 2fr) [right] minmax(200px, 1fr)，让命名线始终存在 - ❌ 避免：不同断点分别写
grid-template-columns: 1fr 1fr和grid-template-columns: 1fr—— 子网格无法判断“哪个是 main”
subgrid，而是让所有“组件”收敛到同一套父轨道下——结构扁平、命名统一、中间层干净。一旦漏掉任意一环，浏览器就静默丢弃声明，连错误提示都没有。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
