低版本浏览器对CSS Grid支持是按特性逐条跳过，需手动降级：IE11用-ms-grid、Safari旧版需双条件@supports检测、gap用margin模拟、subgrid须手写轨道对齐。
低版本浏览器对 CSS Grid 的支持不是“部分失效”，而是“按特性逐条跳过”——display: grid 在 IE11 里压根不解析，grid-gap 在 Safari 10.1 里静默忽略，subgrid 在 Chrome 114 及更早版本中连声明都认不出来。靠 Autoprefixer 自动补前缀或只写一层 @supports 检测，基本等于没做兼容。
IE11 必须手动改写为 -ms-grid，不能依赖 Autoprefixer
Autoprefixer v9+ 已彻底移除对 IE Grid 的转换能力。它不会把 grid-column: 2 / 4 转成 -ms-grid-column: 2; -ms-grid-column-span: 2，也不会帮你算终点列索引。
-
display: grid→ 必须显式写成display: -ms-grid（IE11 唯一认的入口） -
grid-template-columns: 1fr 2fr→ 改为-ms-grid-columns: 1fr 2fr（注意：IE 对fr支持不稳定，稳妥起见用auto或固定值） - 每个子项必须手动定位：
grid-column: 1 / 3→ 拆成-ms-grid-column: 1; -ms-grid-column-span: 2 -
justify-items: center在 IE 中无效，得用-ms-grid-column-align: center替代
@supports 检测要带语法约束，否则 Safari 10.1 会误入 Grid 分支
只写 @supports (display: grid) 会让 Safari 10.1、iOS Safari 15.6 这类“半支持”浏览器进入 Grid 样式块——它们能解析 display: grid，但不支持 gap 或 fr，结果布局直接碎裂。
- 推荐检测组合：
@supports (display: grid) and (grid-template-columns: 1fr)，双条件筛掉绝大多数旧 WebKit - 降级样式必须写在
@supports块外层，IE11 和 Safari 9 会直接跳过整个@supports块，只有外层规则能生效 - 别嵌套
@supports (gap: 1rem)：Safari 10.1 不支持该语法，整块会被忽略，fallback 失效
Gap 失效时，用 margin 模拟比加前缀更可靠
grid-gap 在 IE 全系、Safari ≤14.1、Android WebView ≤76 中被完全忽略，getComputedStyle(el).gap 返回空字符串。Autoprefixer 即使开启 grid: true，也只展开为 grid-row-gap/grid-column-gap，不加 -webkit- 前缀。
立即学习“前端免费学习笔记（深入）”；
- 所有网格项统一设
box-sizing: border-box，避免 margin 撑破容器 - 横向间隙：
.item { margin-right: 12px; }+.item:nth-child(3n) { margin-right: 0; } - 纵向间隙：
.item { margin-bottom: 12px; }+.grid { margin-bottom: -12px; }（父容器负边距抵消最后一行多余间隙） - 不要用
padding或border模拟 gap：响应式下尺寸易失控，尤其配合max-width时
Subgrid 降级必须手写轨道对齐，不能靠复制父定义自动推导
grid-column: subgrid 在 Chrome 114、Safari 17.3 及更早版本中不被识别，声明被跳过，getComputedStyle 返回空字符串。即使写了 @supports (grid-template-columns: subgrid)，Firefox 111–113 还有已知 bug，会错误返回 true。
- 父容器必须显式定义
grid-template-columns: 120px 1fr（不能是repeat(auto-fit, ...)） - 子元素启用
grid-column: subgrid的直系子代，在降级时需手动设为display: grid+ 完全相同的grid-template-columns - 每个字段（如
label、input）要显式写grid-column: 1或grid-column: 2，不能指望 fallback 自动分配 - 用 CSS 变量统一列定义：
--form-cols: 120px 1fr;，父子都引用grid-template-columns: var(--form-cols)，避免硬编码重复
真正麻烦的不是写两套样式，而是 subgrid 和 gap 这两个特性一旦失效，没有中间态——要么严格对齐，要么完全塌陷。降级路径必须覆盖到孙子层级，且所有列数、间距、对齐方式都要手动对齐，任何一处遗漏都会导致视觉错位。
