目前真正可用于生产环境的 grid level 2 特性仅有 subgrid；它需显式声明 grid-column: span n 才能横跨父列，不支持双继承行列轨道，且仅 firefox 原生支持，chrome/safari 仍处实验阶段。
目前真正能用在生产环境的 Grid Level 2 特性，只有 subgrid；其他如 masonry 布局仍处于实验阶段，不可依赖。
为什么必须显式写 grid-column: span N 才能用 subgrid
子网格不会自动横跨父容器所有列——它默认只占一格，哪怕你写了 grid-template-columns: subgrid。浏览器不会“猜”你想继承几列，必须靠 grid-column 或 grid-row 明确声明跨越范围。
- ❌ 错误：父容器三列，子容器只写
grid-template-columns: subgrid→ 子网格实际只占第 1 列，其余两列空白 - ✅ 正确：加
grid-column: span 3（或grid-column: 1 / -1），再配grid-template-columns: subgrid - ⚠️ 注意：
span数必须匹配父容器定义的列数；若父容器用repeat(4, 1fr)，就得写span 4，不能写span 3
subgrid 不支持同时继承行列轨道
当前所有浏览器（包括 Firefox 71+）都不支持 grid-template-columns: subgrid; grid-template-rows: subgrid 这种双继承写法。它只能单向继承：要么列，要么行，不能两者兼得。
- ✅ 可行：
grid-template-columns: subgrid+ 自定义grid-template-rows: auto 100px - ✅ 可行：
grid-template-rows: subgrid+ 自定义grid-template-columns: 1fr 2fr - ❌ 无效：
grid-template-columns: subgrid; grid-template-rows: subgrid→ 被忽略，退化为普通网格 - ? 实际选择依据：优先继承更难对齐的那个维度（比如多卡片横向排列时，列对齐比行对齐更关键）
父容器必须显式定义 grid-template-columns 或 grid-template-rows
subgrid 继承的是“显式轨道”，不是隐式生成的轨道。如果父容器靠 grid-auto-columns 或 gap + auto-fit 动态撑开列数，子容器写 subgrid 就会失效。
- ✅ 有效：父容器写
grid-template-columns: 1fr 2fr 1fr→ 子容器可安全继承 - ❌ 无效：父容器只写
display: grid; gap: 1rem，没定义任何grid-template-*→subgrid不起作用 - ⚠️ 隐式轨道常见于响应式布局中用
repeat(auto-fit, minmax(...))的场景，此时subgrid无法使用
真正容易被忽略的一点是：Firefox 是目前唯一原生支持 subgrid 的主流浏览器，Chrome 和 Safari 仍需手动开启实验标志，且无明确启用时间表。这意味着你在开发时看到的对齐效果，在多数用户真实环境中并不存在——subgrid 目前只能用于渐进增强的特定模块，不能作为布局主干依赖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
