能实现跨容器对齐，但需父容器显式定义带命名的轨道、所有区块作为其直接子元素并统一启用grid-template-columns: subgrid，中间层须双轴subgrid且禁用gap等干扰项。
能实现，但前提是父容器轨道必须显式、纯净，且所有参与对齐的组件必须是它的直接子元素——subgrid 不跨层、不猜轨道、不兼容隐式定义。
为什么 grid-template-columns: subgrid 在子组件里没反应
最常踩的坑是父容器只写了 display: grid 和 gap，却漏掉关键声明：grid-template-columns 或 grid-template-rows。subgrid 不继承 gap 插入的隐式列，也不认 repeat(auto-fit, ...) 这类动态生成的轨道。
- ✅ 正确写法：父容器必须有显式命名轨道，例如
grid-template-columns: [left] 1fr [main] 2fr [right] 300px - ❌ 错误写法：仅
grid-template-columns: repeat(3, 1fr)—— 没命名线，子组件无法用grid-column: main锚定 - ⚠️ 静默失效：浏览器不会报错，
computed样式中grid-template-columns直接显示为none
让标题块、图片块、富文本块对齐同一套列线
核心不是每个块自己建网格，而是让它们都作为父网格的直接子项，并统一启用列 subgrid。块内元素直接消费父级命名线，不重算、不加 margin。
- 父容器（如
.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; } - 禁止在块上加
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 都可能让整条对齐链失效。
