应使用 @supports (display: grid) 隔离 grid 样式，外层写健壮的 flexbox 降级布局；避免在 grid 块中重复声明 flex 属性或使用高阶 grid 特性，确保删掉 @supports 后页面仍正常工作。
如何用 @supports 检测 Grid 并降级到 Flexbox
Grid 不被旧浏览器支持时，直接写两套布局会导致样式冲突或意外覆盖。必须用 @supports 隔离 Grid 声明，否则 Flexbox 降级规则会被 Grid 覆盖（尤其当两者作用于同一选择器时）。
关键不是“先写 Flex 再写 Grid”，而是让 Grid 规则只在支持时生效，且不干扰 Flex 的原始结构：
-
@supports (display: grid)是最稳妥的检测方式，比检测具体属性（如grid-template-columns）兼容性更好 - Flexbox 降级样式必须写在
@supports外层，且不能带!important—— 否则 Grid 规则可能因权重或顺序失效 - 避免在
@supports块内重复声明 Flex 相关属性（如display: flex），这会覆盖外层已设好的 Flex 行为
.container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
<p>@supports (display: grid) {
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
}</p>
为什么不能只靠 display: flex fallback？
单纯声明 display: flex 在前、display: grid 在后，无法可靠降级。IE11 和部分 Android 4.x 浏览器会忽略 display: grid，但它们对 gap、place-items 等 Grid 专属属性完全无感知，仍会尝试解析并报错（虽不阻断渲染，但控制台有警告）。
更严重的是：某些旧版 Safari（如 10.1）识别 display: grid 但不支持 gap，若你在 Grid 块里写 gap: 1rem，它会静默丢弃整条声明 —— 导致子项紧贴，而你又没在 Flex 版本里补 margin。
- Flex 版本中需手动模拟
gap：用margin+:nth-child或 wrapper padding - Grid 中的
justify-content: center在 Flex 中对应justify-content: center，但place-items: center在 Flex 中需拆成justify-content+align-items - 避免在
@supports块中使用subgrid或grid-area等高阶特性 —— 它们的检测支持度远低于基础 Grid
@supports 嵌套写法的实际限制
@supports 支持嵌套，但嵌套本身不解决降级逻辑问题 —— 它只是语法允许，并非推荐做法。例如：
@supports (display: grid) {
@supports (gap: 1rem) {
.container { gap: 1rem; }
}
@supports not (gap: 1rem) {
.container { /* fallback margin logic */ }
}
}
这种写法看似精细，实则危险：
- Chrome 89+ 才开始稳定支持
@supports not中的函数式值检测，旧版会直接跳过整个块 - 嵌套
@supports易导致维护混乱：一个组件要同时考虑 Grid 支持性、gap 支持性、subgrid 支持性……实际项目中应优先保核心布局结构，再按需渐进增强 - 真正需要区分
gap支持与否时，更稳妥的方式是用 JS 检测后加 class，而非纯 CSS 嵌套
移动端 WebView 和低版本 Safari 的典型坑
iOS 9.3 的 Safari 支持 display: grid，但不支持 grid-template-areas 和 minmax() 中的 auto 关键字；Android 6 的 WebView 根本不识别 @supports，会忽略整个块 —— 这意味着你的 Flexbox 降级必须独立、健壮、无需任何条件包裹。
- 永远把 Flexbox 版本当作「默认可运行版本」，Grid 版本只是增强 —— 即使删掉整个
@supports块，页面也应正常工作 - 避免在 Grid 块中修改 Flex 已设定的
flex-direction或flex-wrap，否则降级后行为不可控 - 测试时不要只看 Chrome/Firefox，必须真机跑 iOS 10–12 和 Android 5–7 的原生浏览器（不是 Chrome for Android）
最常被忽略的一点：Grid 的 fr 单位在降级 Flex 中没有直接等价物，flex: 1 只在 flex-direction: row 下近似等效，若原 Grid 是列方向布局（grid-auto-flow: column），Flex 降级就得改用 flex-direction: column + flex-basis 手动控制，不能简单套用同一套类名逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
