最可控降级路径是先写display: flex基础布局，再用@supports (display: grid) and (grid-template-columns: 1fr)包裹Grid样式；单条件检测会放行Safari 10.1等半支持浏览器，导致gap等失效而布局错位，且IE11/Safari≤9直接跳过整个@supports块。
直接用 display: flex 作为基础布局，再用 @supports 包裹 Grid 样式——这是目前最可控、无 polyfill 风险的降级路径。
为什么不能只靠 @supports (display: grid)
单条件检测会放行 Safari 10.1、iOS Safari 15.6 等“半支持”浏览器：它们能解析 display: grid，但 gap、fr、grid-template-areas 全部静默失效，布局直接错位或退化为单列流。IE11 和 Safari ≤9 更极端：整个 @supports 规则块被跳过，里面写的降级样式根本不会加载。
-
@supports (display: grid) and (grid-template-columns: 1fr)才能准确筛掉 IE 和旧 WebKit - 别用
@supports (gap: 0)：Firefox 63 之前不支持，误判率高 - 降级样式（如
display: flex）必须写在@supports外层，否则老浏览器看不到
Flex 降级要避开哪些坑
Flex 不是 Grid 的“简化版”，它对齐逻辑、换行行为、子项尺寸计算都不同，直接套用容易出视觉偏差。
- 用
flex-wrap: wrap替代grid-auto-flow: dense，但需手动控制子项宽度（如flex: 0 0 calc(33.333% - 8px)）来模拟三列 gap - 避免
align-items: stretch和min-height冲突：旧版 Safari 对min-height在 flex 容器内解析不稳定 - IE10/11 的 flex 支持有限，
flex: 1建议拆成flex-grow: 1; flex-shrink: 1; flex-basis: 0 - 所有子项加
box-sizing: border-box，防止 padding/margin 撑破容器宽度
Gap 失效时，用 margin 模拟比加前缀更可靠
grid-gap 在 IE 全系、Safari ≤14.1、Android WebView ≤76 中被浏览器静默忽略，getComputedStyle(el).gap 返回空字符串。此时加 -webkit-grid-gap 或 grid-row-gap 都无效，唯一可控的是 margin。
- 横向间隙：
.item { margin-right: 12px; }+.item:nth-child(3n) { margin-right: 0; }（假设每行 3 列） - 纵向间隙：
.item { margin-bottom: 12px; }+.grid { margin-bottom: -12px; }（父容器负边距抵消最后一行多余间距） - 必须设
box-sizing: border-box，否则margin-right会让实际宽度超 100%，触发意外换行 - 别在
grid-template-columns里写死像素（如500px 500px），得用1fr 1fr或minmax(0, 1fr)给 margin 留出生效空间
IE9 及以下必须彻底换模型
IE9 及更早版本连 @supports 都不识别，display: -ms-grid 也不支持，只能退回 float 或 display: table。
- 用
float: left实现多列时，清除浮动必须用伪元素：.grid::after { content: ""; display: block; clear: both; }，IE6/7 还需加zoom: 1 -
display: table-cell能天然等高，但单元格之间不能用margin，改用border-spacing（配合display: table父容器）或padding - IE8 不支持
table-layout: fixed下的百分比列宽，列宽必须显式设width或依赖内容撑开 - 避免嵌套
table-cell：IE 下易触发重绘异常，滚动时内容闪烁
真正麻烦的不是写两套样式，而是每套都要独立验证渲染路径——Grid 分支走现代引擎，Flex 分支走 Safari 10.1，float 分支走 IE8，三者对盒模型、单位解析、继承行为的理解全不一样。最容易被忽略的是：本地开发时看到的“正常”，往往只是缓存的旧 CSS 在起作用，真机调试前务必硬刷新并清空 DevTools 的缓存。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
