旧版浏览器对CSS Grid的支持是整条规则被静默丢弃，@supports检测不可靠，必须手写-ms-grid并配合双条件检测与渐进增强策略。
旧版浏览器对 CSS Grid 的支持不是“部分失效”，而是“整条规则被静默丢弃”——你写的 display: grid 在 IE10、Chrome 56 或 Android 4.4 WebView 里根本不会被解析，连报错都不会有。靠 Autoprefixer 自动降级或单靠 @supports (display: grid) 检测，基本等于没做兼容。
为什么 @supports (display: grid) 在旧浏览器里完全失效
Android 4.4 WebView（Chromium 30）、IE11 及更早、Safari ≤9 这些环境，压根不识别 @supports 规则本身。整个 @supports 块会被跳过，里面写的 Grid 样式不会生效，但外层降级样式如果没写在块外，也一并丢失。
-
@supports (display: grid)单独使用，会让 Safari 10.1、iOS Safari 15.6 这类“半支持”浏览器误入 Grid 分支——它们能解析display: grid，但不支持gap或fr，结果子项堆叠或溢出 - 真正可用的检测必须是双条件：
@supports (display: grid) and (grid-template-columns: 1fr)，能筛掉几乎所有旧 WebKit 和 IE 环境 - 所有降级样式（比如
display: flex或float: left）必须写在@supports块**之外**，否则 IE11 和 Safari 9 根本看不到
IE11 必须手写 -ms-grid，且不能依赖 Autoprefixer 自动转换
Autoprefixer 不会把 grid-column: 2 / -1 转成 IE 可用的 -ms-grid-column；它只在你**已经写了 display: -ms-grid** 的前提下，补几个配套属性。源码里漏了这行，输出里就绝不会有 -ms-。
- 容器必须显式声明：
display: -ms-grid; display: grid;（-ms-grid在前，否则 IE11 直接忽略） -
grid-template-columns: 1fr 2fr要改写为-ms-grid-columns: 33.33% 66.66%（IE11 对fr支持极不稳定，混用易渲染为 0） - 每个子项必须手动定位：
grid-column: 1 / 3→ 拆成-ms-grid-column: 1; -ms-grid-column-span: 2（IE11 不支持负索引、span 2或区域名） -
justify-items、grid-gap在 IE11 中无效，得用text-align、margin替代
Chrome 56 及更早版本：别指望 -webkit-grid 能兜底
Chrome 56 及之前只认实验性 display: -webkit-grid，且功能残缺：不支持 grid-gap、fr、auto-fit，连 grid-template-areas 都解析失败。它不是“兼容差”，是“根本不认现代语法”。
立即学习“前端免费学习笔记（深入）”；
- 不要写
@supports (display: -webkit-grid)—— 这个规则在 Chrome 56 里同样不被识别 - 真正可行的是渐进增强：先写一套
display: flex; flex-wrap: wrap作为基础布局，再用@supports覆盖为 Grid -
gap失效时，用margin模拟：给子项设margin-right和margin-bottom，父容器加负边距抵消最后一行多余空隙 - 调试时务必硬刷页面（Ctrl+Shift+R），旧版 Chrome 缓存机制容易让已删掉的 Grid 声明仍在生效
Subgrid 和 grid-template-areas 别在生产环境碰
subgrid 目前只在 Chrome 115+、Firefox 111+、Safari 17.4+ 可用；grid-template-areas 在 IE11、Safari ≤10.1、Firefox ≤52 中整条声明被静默丢弃——DevTools 里显示为灰色划掉，但控制台无提示，排查成本极高。
-
grid-area: header这种写法必须彻底删除，改用grid-row: 1 / 3; grid-column: 1 / -1这类行列定位（注意：旧 Safari 不支持负索引，得换算成具体列数） -
subgrid的真实启用状态无法靠@supports准确判断，Firefox 还需检查about:config里的两个开关是否开启并重启浏览器 - 哪怕只在媒体查询里改一次
grid-template-areas，Safari ≤14 就可能让整个 Grid 布局退化为 block
最常被忽略的点：兼容不是“多写几行前缀”，而是确认每条声明在目标浏览器里是否真被解析。IE11 的 -ms-grid 必须手算坐标，Chrome 56 的降级必须脱离 @supports 存活，而 Safari 15.6 这类“半支持”环境，靠单条件检测反而比不检测更危险。
