最轻量可靠的 Grid 支持检测方式是 @supports (display: grid)，需避免缺括号、非法属性或末尾分号等错误写法；IE10/11 不支持 @supports，须用 JS 检测或 IE 专属媒体查询；gap 需单独验证，推荐用 @supports (row-gap: 0)；Grid Inspector 激活前提是 display 计算值为 grid/inline-grid 且未失效。
@supports (display: grid) 是最轻量可靠的检测方式
直接用 @supports (display: grid) 就行，它比查 UA、运行 JS 或“试探性写 grid 样式再检查 computedStyle”都更准——浏览器要么原生支持并执行规则，要么完全忽略整段 CSS，不会静默失败或回退到错误状态。
常见错误写法必须避开：@supports display: grid（缺括号）、@supports (grid: 1fr)（grid 不是标准可检测属性）、@supports (display: grid;) （末尾分号非法）。
推荐组合检测提升准确性：@supports (display: grid) and (grid-template-columns: 1fr)。单写 (display: grid) 会让 Safari 10.1 通过检测，但它不支持 gap 和 grid-template-areas，布局仍可能错位。
IE10/11 无法用 @supports 检测，必须另辟路径
@supports 在 IE 中被整个忽略——它不认识这个 at-rule，连解析都不会做，所以你不能靠它给 IE 写降级样式。IE10/11 只支持过时的草案语法（display: -ms-grid），和现代 Grid 完全不兼容。
立即学习“前端免费学习笔记（深入）”；
真正可行的 fallback 路径只有两条：
- 用 JavaScript 特性检测：
'grid' in document.documentElement.style（IE11 返回false） - 用 IE 专属媒体查询：
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)，仅匹配 IE10/11
别指望 autoprefixer 自动帮你加 -ms- 前缀——它从 9.0+ 开始只对 display: grid 加前缀，其他所有 grid-* 属性一律不处理，文档明确写着 “Grid is not prefixed”。
Chrome/Firefox/Safari 的 gap 支持需单独验证
gap 的兼容性断层比 display: grid 更晚：Chrome 66、Firefox 63、Safari 14.1 才原生支持；Safari 14.0 及更早、所有 IE、Edge 16–18 直接丢弃该声明，不报错也不生效。
别用 @supports (gap: 0) —— 某些安卓 WebView 解析异常。稳妥写法是：@supports (row-gap: 0) 或 @supports (column-gap: 0)，这两个属性更早被广泛实现且语法更稳定。
在 DevTools 中快速验证：gap 声明显示为灰色或带删除线，Computed 面板搜不到值，基本就是兼容性问题。iPhone 若未升级到 iOS 14.5+，Safari 渲染引擎仍可能不支持 gap。
开发者工具里 Grid Inspector 不出现？先看 display 是否真生效
Firefox Developer Edition 和 Chrome 的 Grid Inspector 都依赖一个前提：目标元素的 display 计算值**必须是 grid 或 inline-grid**，且该声明未被划掉、未处于 inactive 状态（比如写在 :visited 里）。
实操排查顺序：
- 打开 Elements 面板 → 找到疑似容器 → 看 Styles 里
display: grid是否高亮、无删除线 - 切到 Computed 面板 → 搜索
display→ 确认值确实是grid - 若用
@supports包裹了display: grid，但当前浏览器不支持该检测条件，那 Grid Inspector 就不会激活
Firefox 还需确认是否为 Developer Edition（非 ESR/Release 版），且系统不低于 Windows 10；Chrome 则需点击 display: grid 值右侧的蓝色 ❐ 图标手动启用可视化层——它不会自动弹出。
