Subgrid跨组件对齐需父容器显式定义命名轨道、所有组件为直接子项、子组件声明display: grid/grid-template-columns: subgrid/grid-column范围；否则浏览器静默丢弃，computed显示none。
Subgrid 本身不支持跨组件对齐，所谓“跨组件”对齐，本质是让所有组件成为同一父网格的直接子项，并统一启用 subgrid 消费其轨道——否则声明会被浏览器静默丢弃，computed 样式中显示为 none。
父容器必须显式定义带命名的 grid-template-columns
只写 display: grid 或 gap 不够；grid-auto-columns、repeat(auto-fit, ...) 生成的是隐式列，subgrid 无法继承。
-
✅ 正确：grid-template-columns: [start] 1fr [main] 2fr [sidebar] 300px [end]—— 命名线可被子元素锚定 -
❌ 错误：grid-template-columns: repeat(3, 1fr)—— 虽显式但无命名，子项无法用grid-column: main精准定位 -
⚠️ 注意：列数要覆盖所有组件可能出现的布局区域（如预留[sidebar]即使当前没侧边栏）
所有组件必须是父网格的**直接子元素**
中间任何一层 wrapper（哪怕只是语义性 <div class="block-wrapper">）、<code>display: contents 或 Vue/React 的过渡包装层，都会切断 subgrid 继承链。
-
✅ 正确结构：<div class="editor-canvas"> <div class="block-title"></div> <div class="block-rich-text"></div> </div> -
❌ 失效结构：<div class="editor-canvas"><div class="wrapper"><div class="block-title"></div></div></div> - 若必须保留 wrapper，它需设
display: contents且自身不能是网格容器——但此时它已不是“真实网格项”，subgrid仍不可用
子组件必须同时声明 display: grid + grid-template-columns: subgrid + grid-column 范围
只写 grid-template-columns: subgrid 是无效的。浏览器要求子项明确告诉父网格：“我占哪几列”。
立即学习“前端免费学习笔记（深入）”；
-
✅ 必须写全：grid-column: main（或1 / -1），display: grid，grid-template-columns: subgrid -
❌ 常见遗漏：漏掉grid-column，导致子项默认占单列，后续内部元素用grid-column: main会锚定失败 - 禁止在子组件上加
padding或gap—— 它们会撑开内部空间，使内容实际位置偏离父轨道
三层嵌套时如何让工具栏也对齐顶层列线？
孙子层（如编辑器内嵌的格式工具栏）默认对齐的是中间层（区块）的轨道，不是顶层编辑器。要“穿透”，中间层必须双轴启用 subgrid 并保持干净。
- 中间层（如
.block-rich-text）必须同时写：grid-template-columns: subgrid和grid-template-rows: subgrid - 中间层禁用
gap、grid-auto-rows、空文本节点、注释节点——任一隐式轨道都会中断映射 - 工具栏内部元素才能安全使用顶层命名线，例如：
.toolbar-button { grid-column: main; }
最易忽略的点：开发者工具里看到 grid-template-columns 的 computed 值是 none，就说明 subgrid 已被丢弃，此时该检查父容器是否写了显式模板、DOM 是否直系、子项是否漏了 grid-column 范围——而不是调样式或加 !important。
