CSS Grid 兼容需手动处理：IE11 用 -ms-grid 前缀并显式定位，Safari ≤10.1 需双写 -webkit-grid 且 @supports 必须双条件检测，gap 失效时用 margin 模拟，降级样式须置于 @supports 外层。
低版本浏览器对 CSS Grid 的兼容不是“部分失效”，而是“按特性逐条跳过”——display: grid 在 IE11 里压根不解析，grid-gap 在 Safari 10.1 中静默忽略，subgrid 在 Chrome 114 及更早版本中连声明都认不出来。靠 @supports 单层检测或 Autoprefixer 自动补前缀，基本等于没做兼容。
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（且必须放在display: grid前面） -
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替代
Safari ≤10.1 需双写 -webkit-grid + 严格约束 @supports
只写 @supports (display: grid) 会让 Safari 10.1、iOS Safari 15.6 这类“半支持”浏览器进入 Grid 分支——它们能解析 display: grid，但不支持 gap 或 fr，结果布局直接碎裂。
- 必须用双条件检测：
@supports (display: grid) and (grid-template-columns: 1fr)，筛掉绝大多数旧 WebKit -
display: grid→ 必须并列写display: -webkit-grid; display: grid -
grid-gap: 12px→ 手动双写：-webkit-grid-gap: 12px; grid-gap: 12px（Autoprefixer 默认不补这个） -
grid-template-areas在 Safari ≤10.1 完全不支持，无论加不加前缀，必须改用grid-column/grid-row显式定位
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：响应式下尺寸错位风险极高
降级样式必须写在 @supports 外层，且语法兼容旧引擎
IE11 和 Safari 9 会直接跳过整个 @supports 块，只有外层规则能生效。Android 4.4 WebView 甚至不支持 @supports 规则本身，整块 CSS 被丢弃。
- 所有降级样式（如
display: flex或float: left）必须放在@supports块之前或之外 - 别指望
@supports not (display: grid)：这个语法在 Android 4.4 里根本无效，浏览器直接报错并丢弃整条规则 - Flex 降级时要重置所有可能干扰的属性：
flex-wrap: wrap、flex-basis: auto、align-items: stretch，避免和 Grid 的二维逻辑耦合 - Grid 分支里要覆盖掉 Flex 的
margin：.item { margin: 0 }，否则gap和margin叠加导致间距翻倍
真正麻烦的不是写两套样式，而是 subgrid 和 gap 这类特性没有“隐式 fallback”——浏览器不支持时不会退回到上一层逻辑，而是直接放弃渲染或错位。你写的每一条降级规则，都得对应到具体失效的语法点上，不能靠工具绕过去。
