最可靠的方法是用 @supports (display: grid) and (grid-template-columns: 1fr) 检测，它能准确过滤 IE 和早期 Safari；降级样式须写在 @supports 外且语法兼容，避免被覆盖或解析失败。
怎么检测浏览器是否支持 CSS Grid
靠 @supports 判断最可靠，它比查 UA 或用 JS 检测更准确，也更轻量。别用 display: grid 是否生效来“试探”，那在旧浏览器里可能静默失败或触发意外回退。
常见错误是写成 @supports (display: grid) —— 缺少括号里的完整声明语法，必须带属性名和值，且值要合法（比如不能写 grid: 1fr / 1fr 这种简写）。
-
@supports (display: grid)✅ 正确（注意空格和冒号） -
@supports display: grid❌ 缺括号，解析失败，整个规则被忽略 -
@supports (grid: 1fr / 1fr)❌grid不是可检测的独立属性，浏览器不认
@supports 里该写哪条 Grid 声明才够稳
只检测 display: grid 会漏掉部分边缘情况：IE10/11 支持 display: -ms-grid，但不支持现代 Grid 语法；而 Safari 9–10.1 虽支持 display: grid，却对 grid-template-areas 或 gap 支持不全。所以得选一条「有代表性的、现代布局中高频使用、且兼容性断层明显的」特性。
推荐用 (display: grid) and (grid-template-columns: 1fr) —— 它同时覆盖 display 和核心模板语法，能有效过滤掉 IE 和早期 Safari。
立即学习“前端免费学习笔记（深入）”；
- 只写
(display: grid)：Safari 10.1 会通过，但grid-gap不生效，布局可能错位 - 加
and (gap: 1rem)更严，但 Firefox 63 以前不支持gap，误判率高 - 避免用
grid-area或justify-content: start，这些在旧版中可能被部分解析，检测不准
降级方案怎么写才不被 Grid 覆盖
关键不是“写了 fallback”，而是确保 fallback 样式在 Grid 不生效时真正起作用。很多人把 Flex 或 float 降级写在 @supports 外面，结果新浏览器加载完 Grid 规则后，又因为 specificity 或顺序问题，让旧规则意外生效。
正确做法：所有 Grid 相关样式都包进 @supports，降级方案单独写在外面，且优先级不能低于 Grid 内部规则。
- ❌ 错误：先写
.list { display: flex }，再写@supports (...) { .list { display: grid } }→ Flex 可能残留影响 - ✅ 推荐：降级用
display: block+float或inline-block，并确保选择器权重一致，比如都用.list - ⚠️ 注意：IE11 会忽略
@supports，直接走外部样式，所以外部样式必须是它能理解的语法（比如不用gap，改用margin）
实际项目里最容易被忽略的兼容点
Grid 的兼容性陷阱不在主干语法，而在配套特性。比如 subgrid 现在只有 Chrome 105+ 和 Firefox 71+ 支持，但如果你在 @supports (display: grid) 里偷偷用了 grid-template-rows: subgrid，旧版 Grid 浏览器会直接丢弃整条规则，导致布局塌陷。
另一个坑是 grid-column: span 2 在 Safari 14 之前需要 -webkit- 前缀，但 @supports 不检测前缀属性，所以这类场景得靠 JS 补丁或单独加前缀规则。
- 不要在
@supports块里混用未广泛支持的子特性（如subgrid、grid-template-rows: masonry） - 如果要用
gap，单独再套一层@supports (gap: 1rem)，别指望主@supports能兜住 - 移动端 WebView（尤其 Android 4.4–6.0 的系统 WebView）常禁用
@supports，得靠构建时插件自动补 fallback
兼容不是加一层 @supports 就完事，得盯住具体用到的每个属性是否真被目标环境支持。
