子grid必须显式声明display: subgrid才能复用父grid轨道；仅支持继承rows/columns的轨道数量与尺寸，不支持grid-template-areas和gap；需父grid使用明确的grid-template（非auto-fit/auto-fill），兼容chrome 119+/firefox 111+/safari 16.4+。
子Grid必须显式声明display: subgrid
父Grid设了grid-template-rows或grid-template-columns，子容器默认仍是普通块级元素，不会自动继承轨道线。想让子Grid复用父Grid的轨道定义，必须在子容器上写display: subgrid，且只对直接子元素生效。
常见错误是只给子容器加display: grid——这会创建全新网格上下文，父级轨道完全失效，子项按自己定义的grid-template重新划分。
-
subgrid不支持grid-template-areas，只能继承rows/columns的轨道数量和尺寸（包括fr、auto等） - 若父Grid用
repeat(3, 1fr)，子Grid设grid-column: 1 / -1后，其内部grid-column: 2就对应父Grid第2列轨道 - 兼容性注意：
subgrid目前仅Chrome 119+、Firefox 111+、Safari 16.4+支持，旧版需回退为grid+ 手动同步尺寸
父Grid的grid-template必须明确，不能靠auto-fit撑开
subgrid依赖父Grid已计算出的具体轨道数和尺寸。如果父Grid用grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))))，浏览器无法在布局前确定列数，子Grid就无法继承有效轨道信息，此时display: subgrid会被忽略。
正确做法是：父Grid用固定数量轨道（如repeat(4, 1fr)）或命名线（如grid-template-columns: [start] 1fr [mid] 1fr [end]），子Grid才能可靠引用。
- 命名线可跨层级继承：
grid-column: start / end在子subgrid中依然有效 - 若父Grid用
grid-auto-columns而非grid-template-columns，子Grid无法继承任何列轨道 - 性能影响小，但渲染逻辑更重——浏览器需先完成父Grid布局，再推导子
subgrid的轨道映射
嵌套时grid-area和span的行为变化
子Grid设为subgrid后，其子项的grid-column、grid-row值不再相对于自身，而是相对于父Grid的轨道线。这意味着原本在普通Grid里span 2表示占两列，现在可能跨越父Grid的多个逻辑区域。
典型误用：父Grid有5列，子subgrid只占据中间3列（grid-column: 2 / 4），此时子项写grid-column: 1 / -1会拉满整个父Grid的5列，而非子容器自身的3列宽度。
- 安全写法是显式用命名线：
grid-column: mid / end，避免依赖数字索引 -
span仍可用，但跨度基于父Grid轨道总数，不是子容器可见范围 - 调试技巧：给父Grid加
outline，子subgrid加border，观察实际轨道对齐位置
Flexbox fallback和响应式断点处理
当subgrid不支持时，子容器会退化为display: block，原有grid-column等声明全部失效。不能指望它自动降级为普通grid。
最简fallback方案是用@supports包裹subgrid规则，并为不支持环境单独写display: grid + 复制父Grid的grid-template定义（注意：此时要手动同步，无法继承）。
- 响应式场景下，父Grid在媒体查询中改了
grid-template-columns，子subgrid自动响应；但fallback的grid需同样在媒体查询里重写 - 不要混用
subgrid和grid在同一容器上，CSS解析器会以最后声明为准，且行为不可预测 - 真正容易被忽略的是：
subgrid不传递gap——父Grid的gap对子subgrid内子项无效，需单独设置
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
