subgrid仅继承父网格轨道线，不继承padding/border等盒模型属性，需单独设置；对不齐父padding/gap是因只映射轨道位置而不感知盒边距；生效前提为子元素明确声明grid-column/grid-row且跨度在父显式轨道内；尺寸由自身盒模型决定，与父轨道无几何绑定；验证须依赖devtools显示的父级线名而非视觉判断。
subgrid 不继承父级盒模型，它只继承父网格的轨道定义（列线、行线），而 margin/padding/border/width/height 等盒模型属性完全独立，必须单独设置。
subgrid 为什么对不齐父容器的 padding 或 gap？
因为 subgrid 只映射轨道线位置，不感知父容器的盒边距。常见现象是子网格内容“看起来偏移”——实际是父容器的 padding 或 gap 在起作用，而子网格自身没做对应抵消。
- 父容器设了
padding: 20px，但子网格没声明padding，其内部网格项会从父内容区左上角（即 padding 后的位置）开始对齐轨道，视觉上像“缩进”了 - 父容器有
gap: 1rem，子网格又没用grid-column: 1 / -1覆盖完整列跨度，就会在子网格内部插入隐式轨道，切断与顶层轨道的映射链 - 子网格自身若也设
gap，它和父级gap是叠加关系，不是继承或覆盖——两者都会渲染，可能造成间距翻倍
grid-column: 1 / -1 是 subgrid 生效的前提之一
子元素必须明确成为父网格中的一个“网格项”，否则浏览器根本不把它纳入 subgrid 处理流程。仅靠 DOM 层级或 display: grid 不够。
- 缺
grid-column或grid-row声明 → 子元素只是普通块级子节点，grid-template-columns: subgrid被忽略 - 写
grid-column: 2 / 3没问题，但必须确保该跨度在父显式轨道范围内；若父用repeat(auto-fit, ...)，则无确定轨道可映射 - 推荐初试时统一用
grid-column: 1 / -1，既保证跨满所有列，又避免因列数动态变化导致错位
subgrid 和父容器 width/height 的关系
subgrid 容器的尺寸由自身盒模型决定，和父轨道线无几何绑定。轨道线只是定位参考线，不提供尺寸约束。
- 父容器
width: 600px，子网格设width: 100%→ 实际宽 600px，其内部grid-column: 1的项对齐到第一条列线，但这条线位置取决于父的grid-template-columns划分，不是像素偏移 - 父容器
grid-template-columns: 1fr 2fr 1fr，总宽 600px → 列线分别在 150px、450px、600px 处；子网格即使width: 300px，它的grid-column: 1仍对齐到 150px 这条线（超出部分裁剪或溢出） - 子网格若设
max-width或flex-basis，不影响轨道线位置，只影响自身渲染区域大小
检测 subgrid 是否真生效，别信眼睛
很多失效场景下，子网格退化为普通 grid，但因列数巧合或内容自适应，看起来“好像对齐了”。必须靠工具验证。
- 在 Chrome 或 Firefox DevTools 的 Grid 面板中勾选 “Show line names”，确认显示的列线名称来自父容器（如
[start]、[col2]），而非子容器自定义名 - 检查 computed 样式：子元素的
grid-template-columns必须解析为subgrid，不能是none、空字符串或回退成1fr 1fr 1fr -
@supports (grid-template-columns: subgrid)检测不可靠：Safari 16.3 声称支持但行为异常，安卓 WebView 常返回 true 却不渲染正确——建议以 DevTools 实际线名为准
最易被忽略的一点：subgrid 不是盒模型代理，它不转发父的 padding、border、box-sizing，也不响应父的 overflow 或 transform。所有这些都得在子网格自己身上重写一遍，轨道对齐只是布局的第一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
