单靠 @supports (display: grid) 降级危险，因旧版 WebKit 能识别但部分不支持 gap/fr，IE11 完全忽略；应改用 @supports (display: grid) and (grid-template-columns: 1fr)，并手动添加 -ms-grid 等兼容写法。
不能只靠 @supports (display: grid) 做降级——它会让 Safari 10.1、iOS Safari 15.6 这类“半支持”浏览器直接进入 Grid 分支，结果 gap 不生效、fr 解析错乱、布局碎裂。
为什么单写 @supports (display: grid) 是危险的
旧版 WebKit（Safari ≤10.1、iOS ≤15.3）能识别 display: grid，但压根不支持 grid-gap、grid-template-areas 和部分 fr 计算。它们会静默忽略这些属性，不报错、不警告、也不 fallback，最终渲染出错位或单列流式布局。
IE11 更极端：display: grid 整条声明被跳过，连解析都不做，@supports 块本身在 IE 中也完全无效——整块 CSS 被丢弃。
- ✅ 正确检测方式：
@supports (display: grid) and (grid-template-columns: 1fr) - ❌ 别用
@supports (gap: 1rem)：Firefox 63 之前不支持，反而误拦现代浏览器 - ❌ 别用
@supports not (display: grid)：IE11 根本不解析，降级样式根本不会生效
IE11 必须手动写 -ms-grid，Autoprefixer 不会帮你转换
Autoprefixer v9+ 已彻底移除对 IE Grid 的语法转换能力。它只补前缀，不改结构。你源码里没写 display: -ms-grid，它就什么都不会输出。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误写法：
.grid { display: grid; grid-template-columns: 1fr 2fr; }→ IE11 当作普通div渲染 - ✅ 正确写法：
.grid { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 2fr; grid-template-columns: 1fr 2fr; } -
grid-column: 2 / -1在 IE11 中必须手动换算：若总列数为 4，则写成-ms-grid-column: 2; -ms-grid-column-span: 3 -
justify-items: center在 IE11 无效，得换成-ms-grid-column-align: center
gap 在 IE/Safari/Android WebView 中静默失效，用 margin 模拟更可靠
grid-gap、row-gap、column-gap 在 IE 全系、Safari ≤14.1、Android WebView ≤76 中均被完全忽略。getComputedStyle(el).gap 返回空字符串，DevTools 里显示为灰色或带删除线。
- ❌ 别用
padding或border模拟：破坏盒模型，响应式下极易撑破容器 - ✅ 推荐做法：所有网格项统一设
box-sizing: border-box，再用margin - 横向间隙：
.item { margin-right: 12px; } .item:nth-child(3n) { margin-right: 0; } - 纵向间隙：
.item { margin-bottom: 12px; } .grid { margin-bottom: -12px; }（父容器负边距抵消最后一行多余间隙）
降级样式必须写在 @supports 外层，且语法要老浏览器能理解
旧浏览器遇到不认识的语法（比如 oklch()、color-mix()、甚至 grid-area）会跳过整条声明，而不是往下找 fallback。所以降级方案不能藏在 @supports 里面，也不能依赖现代语法。
- ✅ 正确顺序：先写
.grid { display: flex; flex-wrap: wrap; }，再写@supports (...) { .grid { display: grid; } } - ❌ 错误写法：
@supports (...) { .grid { display: grid; } } .grid { display: flex; }→ 新浏览器可能因 specificity 或加载顺序残留 Flex 行为 - 别指望
float+width精准复刻 Grid：优先用display: block或inline-block+max-width控制基础流式结构 - 所有子项统一加
box-sizing: border-box，避免 margin/padding 导致尺寸失控
真正麻烦的不是写两套样式，而是每条 Grid 特性在不同旧浏览器中失效方式完全不同：IE11 是“整条跳过”，Safari 10.1 是“部分解析+静默忽略”，Android WebView 是“gap 无效但 fr 可用”。这意味着你必须按特性逐条验证，而不是凭 caniuse 上的绿色打钩就放心上线。
