grid定位属性仅对直接子元素生效，嵌套时需用subgrid显式复用轨道；subgrid要求父容器明确定义模板、子元素为直接子项且自身设display: grid，不支持跨级继承或递归语法。
子元素无法继承父级网格轨道，不是 bug，是 Grid 规范的明确设计——grid-template-rows 和 grid-template-columns 默认不透传，子容器始终是独立坐标系。
为什么 grid-column/grid-row 在嵌套层失效
Grid 定位属性只对网格容器的直接子元素生效。一旦中间夹了一层普通容器（比如 div 未设 display: grid 或 subgrid），内层元素就彻底脱离网格作用域。
- 浏览器会直接忽略其
grid-column、grid-row声明，不报错也不警告 - 常见结构如：
<grid-container><wrapper><target></target></wrapper></grid-container>，其中<target></target>永远不会被定位 - 即使 wrapper 设置了
display: contents，<target></target>仍不算“直接子项”，subgrid也不认它
subgrid 不是“自动继承”，而是显式声明轨道复用
subgrid 是关键字，不是值；它不触发隐式继承，必须在子元素上明确写 grid-template-columns: subgrid 或 grid-template-rows: subgrid，且满足严格前提。
- 父容器必须已定义
grid-template-columns（不能只靠grid-auto-columns或repeat(auto-fit, ...)） - 子元素必须是父容器的直接子项，且自身为
display: grid - 不能混用：
grid-template-columns: subgrid 1fr整条声明会被浏览器丢弃 - 开发者工具里检查 computed 样式，确认
grid-template-columns真的解析为subgrid，而非 fallback 成none
嵌套三层时 subgrid 对齐的是中间层，不是顶层
孙子元素设 grid-template-columns: subgrid，它对齐的是父（第二层）网格的轨道，而非最外层原始轨道——这是最容易误判的点。
- 中间层若加了
gap、grid-auto-rows或手动grid-row: span 2，会插入隐式轨道，导致孙子映射错位 - 没有
subgrid: subgrid这种递归语法，也无法用inherit跨级穿透 - 想让孙子对齐顶层，唯一路径是：顶层 → 中间层（
subgrid+ 零干扰）→ 孙子（subgrid） - 命名线以父级定义为准，子层同名线声明会被忽略
兼容性与降级必须手动处理
Chrome 105+、Firefox 71+、Safari 16.4+ 支持 subgrid，但 Safari 16.3 及更早版本完全不识别，部分安卓 WebView 声称支持却行为异常。
-
@supports (grid-template-columns: subgrid)在 Safari 16.3 返回false，但 16.4 才真正可用，不可全信 - subgrid 失效时浏览器常静默退化为普通 grid，布局“看起来正常”实则轨道已错位
- 生产环境必须提供降级：父容器先定义好轨道，子元素先写
grid-column: span 3类规则，再用@supports包裹subgrid覆盖
真正难的不是写对 subgrid，而是维护轨道连续性——gap、空文本节点、span 偏移、甚至字体渲染差异，都可能让对齐在某台设备上悄悄偏移一像素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
