Subgrid 只在直接父子关系中生效，跨容器对齐需父容器定义命名轨道、子容器启用 subgrid 并锚定对应线，中间层须双轴 subgrid 且禁用 gap 等干扰项。
Subgrid 本身不能跨容器对齐——它只在直接父子关系中生效。所谓“跨容器”，本质是结构上存在中间层或样式隔离，必须靠轨道透传和层级收敛来模拟。
为什么 grid-template-columns: subgrid 在子容器里没反应
最常见原因是父容器没显式定义带命名的轨道，只写了 display: grid 和 gap。
- ✅ 正确：父容器声明
grid-template-columns: [left] 1fr [main] 2fr [right] 300px，子容器才能用grid-column: main锚定 - ❌ 错误：父容器只写
grid-template-columns: repeat(3, 1fr)—— 虽是显式列数，但无命名线，子容器无法精准引用 - ⚠️ 注意：
subgrid失效时浏览器静默丢弃，computed样式中显示为none，不是报错
如何让标题块、图片块、富文本块对齐同一套列线
关键不是每个块自己建网格，而是让它们都作为父网格的**直接子元素**，并统一启用列 subgrid。
- 父容器（如
.editor-canvas）必须定义带命名的列轨道：grid-template-columns: [left] 1fr [main] 2fr [right] 300px - 每个块（
.block-title、.block-image）设display: grid+grid-template-columns: subgrid+grid-column: main - 块内元素直接消费父级线：
.block-rich-text > p { grid-column: main; }，不需算宽度或加margin - 禁止在块上加
gap或padding干扰列轨道映射——这些该由父容器统一控制
三层结构（编辑器 → 区块 → 工具栏）怎么穿透对齐顶层列线
Subgrid 只作用于直接子元素。孙子层（如工具栏）默认对齐的是区块的轨道，不是编辑器顶层。要“穿透”，中间层必须双轴 subgrid 且零干扰。
立即学习“前端免费学习笔记（深入）”；
- 中间层（如
.block）必须同时声明grid-template-columns: subgrid和grid-template-rows: subgrid，缺一不可 - 中间层禁用
gap、grid-auto-rows、空占位元素（如<div></div>），否则会插入隐式轨道，切断映射链 - 中间层若用了
grid-column: span 2，会导致其子元素列索引整体偏移，顶层命名线（如[icon]）无法被正确锚定
真正难的不是写对 subgrid，而是确保所有中间层都不偷偷创建新轨道——哪怕一个 gap: 8px 都可能让整条对齐链失效。
