必须用@supports (grid-template-columns: subgrid)检测Subgrid支持，因其为全有或全无；基础Grid布局需降级可用，Subgrid仅用于对齐增强且须显式声明span跨度。
Subgrid 不支持时会直接退化为普通 grid，页面不会崩，但对齐会失效——所以必须用 @supports 包裹增强逻辑，不能只靠降级。
为什么 @supports (grid-template-columns: subgrid) 是唯一可靠的检测方式
浏览器对 Subgrid 的支持是“全有或全无”：要么完整支持 subgrid 关键字（包括行/列继承、跨轨道对齐），要么完全不识别。不能靠 display: grid 或 grid-column: span 等基础特性来推断。
常见错误是误用 @supports (display: grid)，这会导致 Chrome 116 及更早版本（支持 grid 但不支持 subgrid）也执行子网格代码，结果 grid-template-columns: subgrid 被忽略，子元素按默认 auto 列宽渲染，彻底破坏对齐。
-
@supports (grid-template-columns: subgrid)在 Firefox≥71、Safari≥16、Chrome≥117 返回 true - 在 Safari 15.6 或 Chrome 115 中该规则始终为 false，安全兜底
- 不要检测
grid-row: subgrid—— 语法无效，CSS 解析器会直接丢弃整条声明
如何写一个真正可用的渐进增强结构
核心原则：基础布局用普通 Grid 实现，Subgrid 仅用于对齐增强，且必须显式指定跨越范围（grid-column: span N 或 grid-row: span N），否则即使支持 subgrid 也不会生效。
立即学习“前端免费学习笔记（深入）”；
.form {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.5rem;
}
<p>.form-item {
display: grid;
/<em> 基础：两列等宽 fallback </em>/
grid-template-columns: 1fr 1fr;
}</p><p>@supports (grid-template-columns: subgrid) {
.form-item {
/<em> 增强：继承父网格列定义 </em>/
grid-template-columns: subgrid;
grid-column: span 2; /<em> 必须声明跨度，否则无效果 </em>/
}
}
- 未进入
@supports块时，.form-item是独立两列，标签和输入框可能错位 - 进入后，它严格对齐
.form的auto和1fr列宽，垂直方向也能靠align-items: start统一对齐 - 切勿在
@supports块里覆盖display: grid或重设gap，避免干扰基础流
表格场景下 Subgrid 的兼容性陷阱
GitHub 的 github-markdown-css 用 Subgrid 对齐表格单元格，但实际项目中容易踩两个坑：
- 父表格容器必须显式定义
grid-template-columns，不能依赖auto-fit或auto-fill—— Subgrid 只能继承明确声明的轨道，动态生成的列无法继承 -
<thead>和<tbody>都要设display: contents或单独设为子网格容器，否则它们会成为阻断继承的“布局边界” - 如果表格嵌套在 Markdown 渲染器中（如 remark），需确保 HTML 输出不包裹额外
<div>，否则子网格的父级就不是真正的网格容器
最易被忽略的是：Subgrid 不是“自动对齐”，它是“轨道复用”。没声明 grid-column: span，或父级没定义具体列数，哪怕浏览器支持，也等于没开开关。
