旧浏览器对css grid支持极差：chrome 56及更早仅认-webkit-grid且不支持gap/fr/minmax()；safari≤10.1静默丢弃grid-template-areas并需用-webkit前缀；ie11用-ms-grid且fr不可靠；android 4.4 webview既不支持grid也不支持@supports，降级样式须写在外层。
因为旧浏览器压根不识别 display: grid 这个声明——不是“没效果”，而是解析器直接跳过整条规则，回退成 display: block 或流式布局，导致结构塌陷。
Chrome 56 及更早版本：-webkit-grid 是唯一入口
Chrome 56 及之前只认 display: -webkit-grid，且不支持 gap、fr、minmax() 等现代语法。写了 display: grid 就等于没写；写了 @supports (display: grid) 整块 CSS 都会被忽略。
-
grid-gap必须拆成grid-row-gap和grid-column-gap，Safari ≤10.1 同样只认这两个 -
-webkit-grid-gap: 12px要写在grid-gap: 12px前面，否则 Safari ≤10.1 不生效 - 别依赖 autoprefixer 补
-webkit-grid：它从 v9 开始就彻底放弃这事了
Safari ≤10.1 / iOS ≤15.3：grid-template-areas 是雷区
只要样式里出现 grid-template-areas，整个 display: grid 规则都会被 Safari 静默丢弃，容器退化为 display: block。开发者工具里 Computed 面板中 display 显示为 block，grid-template-columns 显示为空，基本就是它。
- 必须改用数字线定位：
grid-column: 1 / -1、grid-row: 2，所有旧内核都认-1 -
fr单位在 Safari ≤10.1 中计算不稳定，建议用%或px -
gap是唯一合写有效的形式，row-gap和column-gap完全无效
IE11：-ms-grid 不是补丁，是另一套语言
IE11 不解析 display: grid，也不认 grid-column: 1 / 3 这类现代写法。它只支持 2012 年草案版 display: -ms-grid，所有属性都要手动映射，比如 grid-template-columns: 1fr 2fr 得写成 -ms-grid-columns: 1fr 2fr，子项还得显式写 -ms-grid-column: 2; -ms-grid-column-span: 3。
-
display: -ms-grid必须写在display: grid前面，否则 IE11 直接跳过私有声明 -
fr在 IE11 中表现不可靠，混用auto和fr（如auto 1fr）极易错列，生产环境建议用50% 50%或固定值 -
@supports (display: grid)对 IE11 无效，降级样式（如display: flex）必须写在@supports块外层
Android 4.4 WebView：@supports 和 grid 都不存在
Android 4.4 的 Chromium 30 内核既不支持 display: grid，也不支持 @supports 语法本身。整条 @supports 块会被当成无效 CSS 忽略，连带里面的样式都不会加载。你写的 Grid 样式不会生效，但降级样式也得靠它“漏过去”才行——所以降级规则必须写在 @supports 外面，且语法得是它能认的。
- 最稳妥检测方式是 UA 字符串匹配 + 临时元素探测：
/(Android\s+4\.4|Chrome\/30)/.test(navigator.userAgent) - 别用
css-grid-polyfill：它在 Android 4.4 上滚动卡顿、输入延迟、事件丢失，实测 20 项网格帧率低于 12fps - 真正可用的是两套样式：给
加class="no-grid"，再用.no-grid .grid-container { display: flex; }控制降级
最常被忽略的一点：缓存会让本地调试产生幻觉。你以为 Chrome 56 看着正常，其实只是旧 CSS 还在生效。真机或 BrowserStack 拉一个真实 Chrome 56 环境验证，才能确认是否真的支持。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
