根本原因是grid上下文不继承，.card里的grid-column:2默认参考自身容器轨道而非顶层列线；必须由父容器明确定义命名列轨道、.card作为直接子项设display:grid与grid-template-columns:subgrid，且禁用gap等隐式轨道干扰项。
为什么卡片内部元素总对不齐顶层列线
根本原因是 Grid 上下文不继承，.card 里的 grid-column: 2 默认参考的是它自身容器的轨道，不是编辑器根网格的列线。常见现象包括：图标偏左、价格标签错位、按钮挤到文字下方——这些都不是样式写错了，而是子网格压根没接上父级轨道。
父容器必须显式定义带命名的列轨道
Subgrid 不认 repeat(auto-fit, ...) 或 grid-auto-columns 这类隐式生成的列，只响应明确定义且可锚定的轨道。
- ✅ 正确：
grid-template-columns: [left] 1fr [main] 2fr [right] 300px（命名线可用于grid-column: main） - ❌ 错误：
grid-template-columns: repeat(3, 1fr)（无命名线，子组件无法精准定位） - ⚠️ 注意：
grid-template-columns: subgrid在 computed 样式中显示为none时，说明父容器轨道未满足条件，浏览器已静默丢弃该声明
卡片本身必须是根网格的直接子项 + 显式跨列
中间包装层（比如 .card-wrapper）会切断 Subgrid 链路。哪怕只多一层 DOM，subgrid 就失效。
- 结构必须是：
<div class="editor-canvas"><div class="card"></div></div>，不能有嵌套 wrapper -
.card必须设display: grid+grid-template-columns: subgrid+grid-column: main（或1 / -1） - 禁止在
.card上设gap或padding—— 这些该由.editor-canvas统一控制，否则会干扰列轨道映射
三层结构（编辑器 → 卡片 → 卡片内工具栏）怎么穿透对齐
孙子层（如工具栏）默认对齐的是卡片自己的轨道，不是顶层。要“穿透”，中间层（.card）必须双轴干净：
-
.card必须同时声明：grid-template-columns: subgrid和grid-template-rows: subgrid - 禁用
gap、grid-auto-rows、空占位元素（如<div></div>） - 工具栏内元素才能直接使用顶层命名线，例如：
.toolbar > button { grid-column: right; }
真正容易被忽略的是：只要中间层任意一个属性引入隐式轨道（哪怕只是加了个 gap: 8px），整个穿透链就断了，而且不会报错，只会在 DevTools 的 Grid Inspector 里发现命名线消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
