Subgrid 必须父容器显式定义带命名的轨道、子元素设 grid-template-columns: subgrid 才生效；跨组件对齐需所有区块作为父网格直接子元素并统一启用 subgrid，中间层须双轴 subgrid 且禁用 gap/autogrid；响应式调整仅限根容器，否则继承中断。
Subgrid 本身不能跨组件对齐——它只在直接父子关系中生效，且要求父容器显式定义轨道、子容器启用 grid-template-columns: subgrid 或 grid-template-rows: subgrid。所谓“跨组件”，本质是跨 DOM 层级或样式作用域，必须靠结构收敛和轨道透传来模拟。
为什么编辑器里写 grid-template-columns: subgrid 没反应
最常见原因是：父容器（比如编辑器的根 .editor-canvas）没写 grid-template-columns，只写了 display: grid 和 gap。Subgrid 不继承 gap 插入的隐式列，也不认 grid-auto-columns 或 repeat(auto-fit, ...) 这类动态生成的列定义。
- ✅ 正确：父容器声明
grid-template-columns: [start] 1fr [content] 2fr [sidebar] 300px [end] - ❌ 错误：父容器只写
grid-template-columns: repeat(3, 1fr)—— 这虽是显式，但没命名线，子组件无法用grid-column: content精准锚定 - ⚠️ 注意：
subgrid声明后若无效，浏览器会静默丢弃，computed 样式中显示为none，不是报错
如何让不同组件（如标题块、富文本块、图片块）对齐同一套列线
关键不是每个组件自己搞一套网格，而是让所有可拖拽/插入的区块都作为父网格的**直接子元素**，并统一启用列 subgrid；它们内部再用命名线消费父级轨道。
- 父容器（
.editor-canvas）必须定义带命名的列轨道：grid-template-columns: [left] 1fr [main] 2fr [right] 300px - 每个区块（
.block-title、.block-rich-text）设display: grid+grid-template-columns: subgrid+grid-column: main（或left/right） - 区块内部元素直接使用父级命名线：
.block-rich-text > p { grid-column: main; }，无需再算宽度或 margin - 禁止在区块上加
gap或padding干扰列轨道映射——这些该由父容器统一控制
三层结构（编辑器 → 区块 → 编辑器内嵌工具栏）怎么保持列对齐
Subgrid 只作用于直接子元素，孙子层（如工具栏）默认对齐的是区块的轨道，不是编辑器顶层。要“穿透”对齐，中间层（区块）必须同时满足两个条件：
立即学习“前端免费学习笔记（深入）”；
- 它自己是
display: grid，且同时声明grid-template-columns: subgrid和grid-template-rows: subgrid（不能只写一边） - 它内部不能引入任何新轨道：禁用
gap、禁用grid-auto-rows、禁用空占位元素（如<div></div>） - 工具栏元素写
grid-column: main，它消费的是编辑器顶层的命名线，不是区块自己定义的 - 如果区块用了
grid-column: span 2，会导致其子元素列索引整体右移，顶层命名线失效
响应式断点下 subgrid 对齐突然错乱
Subgrid 的继承链非常脆弱：只要父容器在媒体查询中改用 repeat(auto-fit, ...)，或者子组件自己在断点里重写 grid-template-columns，继承就立即中断。
- ✅ 正确做法：所有响应式调整只发生在编辑器根容器（
.editor-canvas）上，例如@media (min-width: 768px) { grid-template-columns: [main] 1fr; } - ❌ 错误做法：在
.block-image里写@media (min-width: 768px) { grid-template-columns: 1fr 1fr; }—— 这等于主动放弃继承 - 调试技巧：Chrome DevTools 的 Grid Inspector 中勾选 “Show line names”，能立刻看到当前元素消费的是哪一层的命名线
- 兼容性兜底：不支持 subgrid 的浏览器（如旧版 Firefox）需用
@supports not (grid-template-columns: subgrid)提供 fallback，比如固定宽度 +margin-left: auto
真正难的不是写对那几行 CSS，而是确保从编辑器根容器到最深的工具栏，每一层都“不插手”轨道定义——只传递、不修改、不遮挡。一旦某层偷偷加了 gap 或用了 auto-fit，整条对齐链就断了，而且没有任何错误提示，只有视觉错位。
