CSS Grid Level 1与Level 2有哪些生产差异

subgrid尚未在生产环境普遍可用，Chrome 126+和Firefox 127+仅通过实验性标志支持，Safari完全未实现，主流浏览器默认不支持，写入即被忽略导致布局崩溃。

Grid Level 1 是当前生产环境唯一可用的规范

Level 2（即 subgrid）尚未被任何主流浏览器在默认模式下完整支持。Chrome 126+ 和 Firefox 127+ 虽已实现 subgrid，但仅限于启用实验性标志（如 Chrome 的 chrome://flags/#enable-css-subgrid），且 Safari 完全未实现。这意味着你在生产项目中写 grid-template-columns: subgrid，实际会降级为 grid-template-columns: none，导致布局崩溃——不是“不生效”，而是直接被忽略，子容器退回到普通块流。

Level 1 的 grid 容器行为是稳定、可预测的

所有现代浏览器（Chrome ≥ 57、Firefox ≥ 52、Safari ≥ 10.1、Edge ≥ 16）对 Level 1 的支持已趋一致。关键行为包括：

1. display: grid 创建新格式化上下文，子元素自动成为 grid item，float、vertical-align 等失效
2. grid-template-columns 和 grid-template-rows 必须显式声明轨道，否则默认为单列单行
3. fr 单位在 Level 1 中始终按剩余空间比例分配，无歧义
4. grid-area 命名区域 + grid-template-areas 在所有支持浏览器中渲染一致

Level 2 的 subgrid 解决什么问题？为什么现在不能用？

subgrid 的目标是让嵌套网格复用父网格的轨道线（比如让菜单项和其子菜单共享同一列定义），避免重复声明和错位。但它带来两个现实阻碍：

1. 浏览器实现不统一：Firefox 支持 subgrid 在行/列两个方向，Chrome 目前只支持列方向（grid-template-columns: subgrid），行方向仍报错
2. 无法优雅降级：CSS 不提供 @supports (grid-template-columns: subgrid) 这类可靠检测（目前仅部分支持 @supports display: grid），你无法安全地 fallback 到 Level 1 写法
3. 构建工具不识别：PostCSS 插件（如 autoprefixer）至今不处理 subgrid，也无法自动注入 polyfill 或警告

生产中替代 subgrid 的可行方案

如果你需要嵌套对齐（比如多级菜单、表单分组、卡片内网格），目前只能靠 Level 1 特性组合实现：

1. 用 grid-column / grid-row 显式指定子项位置，而非依赖继承轨道
2. 将嵌套结构提升为同级 grid item，用 grid-area 分配区域，再用 display: contents 隐藏中间容器（注意可访问性影响）
3. 对齐依赖统一 --gap 和 minmax()，例如：grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) 在父、子容器中保持一致
4. 避免“伪 subgrid”陷阱：不要给子容器设 display: grid 后又试图用 grid-column: 1 / -1 拉满——它不会对齐父列线，只是占满自身容器宽度

真正要等 subgrid 进入生产，得看 Safari 何时落地，以及 Can I Use 数据显示全球 95%+ 用户覆盖 —— 目前还差至少一个大版本周期。