CSS subgrid 在低版本安卓系统中完全不被支持——Chrome 115 前、Android WebView ≤114、iOS Safari 16 及更早均静默丢弃该声明；Android 设备 userAgent 显示的 Chrome 版本不等于实际 WebView 内核版本，需通过正则提取真实内核主版本判断。
不能在低版本安卓系统中“使用”CSS subgrid功能——Chrome 115 之前、Android WebView ≤114、所有 iOS Safari 16 及更早版本均完全不识别 subgrid 值，声明会被浏览器静默丢弃，getComputedStyle(el).gridTemplateColumns 返回空字符串或初始值，不是“效果不好”，是压根没进渲染引擎。
为什么查 userAgent 显示 Chrome/128 却 still no subgrid
Android 设备上显示的 Chrome 版本号 ≠ 实际 WebView 内核版本。系统 WebView 由 OEM 厂商打包或 Android 系统更新提供，常滞后 3–6 个大版本。例如：某 Android 13 设备出厂 WebView 内核仍是 Chromium 107（2022 年底发布），而 subgrid 直到 Chromium 115（2023 年中）才稳定支持。
- 必须用
navigator.userAgent提取真实内核主版本：ua.match(/Chrome\/(\d+)\./)?.[1]或ua.match(/WebView\/(\d+)\./)?.[1] - Android 10 及以下设备默认按 Chromium ≤85 处理，
subgrid不可用 - 查到内核主版本 subgrid，不试探、不降级渲染，直接走 fallback 路径
@supports (grid-template-columns: subgrid) 根本不可靠
@supports 在旧 Blink 引擎中对 subgrid 的检测会失败：Chromium 110–114 虽能解析 display: grid，但遇到 grid-template-columns: subgrid 会直接跳过整条规则，@supports 仍返回 true，导致布局错乱。
- 正确检测方式必须叠加轨道定义验证：
@supports (grid-template-columns: subgrid) and (grid-template-columns: 1fr) - 更稳妥做法：只在已知内核 ≥115 的环境启用，其余一律 fallback，不依赖 CSS 检测兜底
- 不要把
subgrid和 fallback 规则写在同一选择器里，比如.child { grid-template-columns: subgrid, 1fr 2fr }—— 语法非法，整条声明失效
真正在低版本安卓上“模拟 subgrid 行为”的实操路径
核心不是“让 subgrid 工作”，而是用显式轨道复刻对齐效果。父容器列定义必须固定（不能用 repeat(auto-fit, ...)），子组件内部字段手动对齐。
- 父容器统一用 CSS 变量定义列：
--cols: 120px 1fr 80px，并显式写grid-template-columns: var(--cols) - 子组件设
display: grid，并重复该变量：grid-template-columns: var(--cols) - 子组件的每个直系子元素（如
label、input）显式写grid-column: 1/grid-column: 2，而非依赖subgrid自动继承 - 若父列数动态（如三栏变单栏），fallback 中必须用固定列数（如
repeat(3, 1fr)），不能留空或写auto-fit - 所有网格项加
box-sizing: border-box，避免 padding/border 撑破列宽
真正难的不是写出 grid-template-columns: subgrid 这一行，而是确保从父容器到子元素之间没有 display: contents、fieldset、多余 wrapper，且响应式断点全部集中在根容器——任何中间层干预都会让整条继承链断裂，在低版本安卓里连 fallback 都救不回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
