CSS Grid兼容性非布尔值而是分层谱系，需通过UA提取Chrome/或WebView/主版本号精确判断，Android 10及以下默认≤85，禁用subgrid；@supports(display:grid)不保证grid-area、gap等子特性可用，须叠加grid-template-areas等二次校验。
因为 CSS Grid 的“支持”不是非黑即白的布尔值，而是分层、分语法、分内核版本的连续谱系——上线后不测，等于把布局交给未知引擎随机解析。
Android WebView 和国产浏览器根本不看 Chrome 版本号
你手机装着 Chrome 128，但 WebView 可能还是 Chromium 95（Android 12 出厂固件常见），而 grid-template-areas、gap、甚至 fr 单位在 Chromium 95 里存在解析偏差或直接失效。国产浏览器如 QQ X5、UC 内核更常伪造 Chrome/114.0 UA，实际内核可能连 display: grid 都不触发重排。
必须用运行时检测：
const ua = navigator.userAgent; const chromeMatch = ua.match(/Chrome\/(\d+)\./); const webviewMatch = ua.match(/WebView\/(\d+)\./); const kernelVersion = chromeMatch?.[1] || webviewMatch?.[1] || 'unknown'; // Android 10 及以下默认按 ≤85 处理，禁用 subgrid、避免 gap + flex 混合
@supports (display: grid) 不等于“所有 Grid 功能都可用”
@supports 只能确认 display: grid 被识别，但无法保证 grid-area 命名区域生效、grid-auto-flow: dense 正确计算、或 column-gap 被继承。iOS Safari 15.4 支持 display: grid，但 grid-template-areas 在某些嵌套场景下会丢弃命名。
- 不要只靠
@supports (display: grid)加载整套 Grid 样式 - 对关键区域（如导航栏、商品卡片网格）单独加
@supports (grid-template-areas: ...)二次校验 - Android 低端机上，即使通过
@supports，也建议 fallback 到display: flex+flex-wrap
autoprefixer 对 Grid 基本不加前缀，别指望它救 IE 或老 Safari
autoprefixer 9.0+ 明确声明 “Grid is not prefixed”。它只给 display: grid 加 -ms-grid（仅限 IE10/11），其他所有 grid-* 属性一律跳过——因为早期 Firefox、Safari 实验性语法和 IE 的 -ms-grid 完全不兼容，加错前缀反而导致样式崩溃。
IE10/11 必须手写：
.grid {
display: -ms-grid;
-ms-grid-columns: 1fr 2fr; /* IE11 不认 2fr，得写 33.33% 66.66% */
-ms-grid-rows: auto 1fr;
}
.item {
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 2; /* 不支持 span 2，只能写具体数字 */
}
注意：grid-gap 在 IE 中完全无效，必须用 margin 模拟，且要小心 box-sizing 影响。
真正容易被忽略的点是：CSS Grid 的兼容性测试不能只跑在“主流浏览器最新版”上，必须覆盖真实设备的系统 WebView 版本、国产浏览器内核标识、以及 iOS WebKit 构建号（Version/618 这类不是主版本号）。一次漏测，就可能让某个机型上的首页网格塌成一列不可滚动内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
