目前真正落地、能直接用于生产环境的 CSS Grid Level 2 功能只有 subgrid，它允许子网格复用父网格的列或行轨道，解决嵌套网格对齐错位问题；但仅支持单向（columns 或 rows）继承，需配合 grid-column/grid-row 显式跨越，且浏览器支持有限，Firefox 71+ 原生支持，Chrome/Safari 仍需实验标志且无正式计划。
目前真正落地、能直接用在生产环境的 CSS Grid Level 2 功能，只有 subgrid —— 其他提案（比如 masonry 布局）仍处于实验或部分支持阶段，不能当作稳定特性依赖。
subgrid 是什么，为什么必须用它
当你嵌套一个 display: grid 容器进另一个 Grid 容器时，子容器默认会创建自己的轨道（列/行），和父容器完全无关。结果就是：子项无法对齐到父网格线，响应式错位、间距不一致、维护成本飙升。
subgrid 的作用就是让子网格「放弃自定义轨道」，直接复用父网格的列线或行线。不是继承样式，是继承轨道定义本身。
- 只支持
grid-template-columns: subgrid或grid-template-rows: subgrid，不能同时写两个 - 必须配合
display: grid使用，inline-grid不支持 - 父容器必须显式定义了
grid-template-columns或grid-template-rows，隐式轨道（比如靠grid-auto-columns生成的）无法被继承
subgrid 的实际写法和常见错误
典型错误是试图让子网格“既继承列又继承行”，或者漏掉 grid-column/grid-row 跨越范围：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误写法：
grid-template-columns: subgrid; grid-template-rows: subgrid;（当前所有浏览器都不支持双subgrid） - ❌ 错误写法：
.child { display: grid; grid-template-columns: subgrid; }但没设置grid-column: span N，导致子网格只占一列，无法横跨父网格多列 - ✅ 正确写法：父容器定义三列 → 子容器用
grid-column: span 3+grid-template-columns: subgrid，再自行定义grid-template-rows
示例片段：
.parent {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
.child {
display: grid;
grid-column: span 3; /* 必须明确跨越 */
grid-template-columns: subgrid; /* 复用父列轨道 */
grid-template-rows: auto 100px;
}浏览器支持现状和兼容性处理
Firefox 71+ 原生支持 subgrid；Chrome 和 Safari 目前（2026 年 8 月）仍需启用实验性标志（chrome://flags/#enable-experimental-web-platform-features），且无正式启用计划。这意味着：
- 不能用
@supports (grid-template-columns: subgrid)做渐进增强 —— 检测会失败，即使开启 flag 后实际可用 - 真实项目中，建议用 JavaScript 检测
CSS.supports('grid-template-columns', 'subgrid')，再动态添加类名做降级（比如 fallback 到display: flex或手动重复定义列宽） - 不要指望移动端 Safari 支持它 —— iOS 17+ 仍未加入
真正需要 subgrid 的场景（比如仪表盘中可折叠的嵌套卡片组、多层对齐的表单布局），现在只能靠手动同步轨道宽度或用 JS 计算来模拟；它的价值很明确，但落地节奏比预期慢得多。
