Chrome 56及更早版本不支持display: grid，需用-webkit-grid前缀；Chrome 57起支持标准Grid；IE11仅支持-ms-grid且需手动补全属性；Safari≤10.1和Firefox存在gap、fr等兼容性问题。
不是代码写错了，而是浏览器压根没解析 display: grid 这条声明——它被静默忽略，退化为 display: block 或其他默认值。
Chrome 56 及更早版本完全不认 display: grid
Chrome 57（2017 年 3 月）才是首个稳定支持标准 Grid 的版本。在此之前：
-
display: -webkit-grid是唯一能被识别的写法，但功能极有限：不支持gap、fr、auto-fit、minmax() -
@supports (display: grid)在 Chrome 56 及更早中无效——整条规则被跳过，连带里面所有样式都不会加载 -
grid-template-columns、grid-area、gap等属性全部静默丢弃，DevTools 中显示为灰色或带删除线 -
autoprefixer默认不为 Grid 属性加前缀；v9+ 版本甚至不处理gap→grid-row-gap/grid-column-gap，指望它兼容旧 Chrome 是白忙
IE11 只认 display: -ms-grid，且必须手动补全所有属性
IE11 不解析 display: grid，连声明都跳过。Autoprefixer v9+ 已彻底移除 IE Grid 转换能力，不会自动生成 -ms- 属性。
- 必须显式并行写：
display: -ms-grid; display: grid; -
grid-template-columns: 1fr 2fr得手动补-ms-grid-columns: 1fr 2fr -
grid-column: 1 / -1在 IE11 中失效，得换算成具体正整数，如-ms-grid-column: 1; -ms-grid-column-span: 3 -
@supports (display: grid)在 IE11 中完全不识别，降级样式必须写在@supports块外层 -
gap全系无效，只能用margin模拟：横向靠margin-right+:nth-child清零，纵向靠margin-bottom+ 父容器负边距抵消
Safari ≤10.1 / iOS ≤15.3 对 gap 和 grid-template-areas 静默丢弃
旧版 Safari 早在 2017 年就移除了所有 Grid 私有前缀支持，只认标准语法，但仅限特定版本才真正启用——很多关键字它根本不解析。
立即学习“前端免费学习笔记（深入）”；
-
row-gap、column-gap单独声明会被忽略，必须统一写成gap: 12px 16px -
grid-template-areas字符串语法直接被跳过，整个网格退化为流式布局；需改用grid-column/grid-row显式定位，且-1比span更可靠 -
auto-fit、fr在某些上下文中计算异常，尤其当父容器是flex子项或设了overflow: hidden时 -
@supports (display: grid)单独检测会放行 Safari 10.1 这类“半支持”浏览器，必须加模板约束：@supports (display: grid) and (grid-template-columns: 1fr)
Firefox 中 fr 失效或 gap 被覆盖的典型诱因
Firefox 对 Grid 实现更严格，常因尺寸上下文缺失或样式冲突导致行为偏差。
-
fr单位要求容器有可测量的内联尺寸；若父元素是flex子项、绝对定位或min-width: fit-content，fr可能回退为0px - 误写
display: -ms-grid会导致整个 Grid 失效（Firefox 62+ 已移除对该前缀的支持） -
gap若与align-content或column-gap同时存在，可能触发冲突而被忽略 -
overflow: hidden或contain: layout会干扰 Firefox 对可用空间的测量，导致auto-fit列数变少
最易被忽略的是缓存陷阱：本地开发看到“正常”，很可能是旧 CSS 还在生效。验证是否真不支持，请用 BrowserStack 或 Docker 拉一个真实 Chrome 56 / IE11 / Safari 10.1 环境测试，别信模拟器或 UA 伪造。
