移动端 subgrid 不可用——Firefox 桌面版是唯一稳定支持者，Chrome for Android、iOS Safari、Edge Mobile 均不支持且无启用时间表；@supports 返回 false，规则被静默忽略，实际未解析。
display: subgrid 在移动端无法可靠使用——Firefox 是目前唯一稳定支持它的桌面浏览器，而所有主流移动浏览器（Chrome for Android、Safari for iOS、Edge Mobile）均不支持 subgrid，且无明确启用时间表（截至 2026 年 10 月）。
这意味着：你在移动端写 grid-template-columns: subgrid，几乎一定会被静默忽略，布局不会报错，但也不会生效。
为什么移动端 subgrid 基本不可用
核心问题不是“写了没效果”，而是“根本没解析”：
- Android Chrome（基于 Blink）尚未实现 subgrid，
@supports (grid-template-columns: subgrid)返回false - iOS Safari（WebKit）虽在 16.4+ 声称实验性支持，但仅限于部分桌面 macOS 场景，iOS 上该特性被完全禁用且无调试入口
- 即使你通过
chrome://flags或safari://debug手动开启实验标志，subgrid 在移动 WebView 或 PWA 中仍会因渲染管线限制而退化 - 移动端的 viewport 缩放、字体回退、动态行高计算等行为，会进一步放大 subgrid 对轨道继承的敏感性，导致 Firefox Desktop 上能跑的代码，在 Fenix（Firefox for Android）里也失效
移动端想对齐嵌套内容？别碰 subgrid，改用这几种方式
真实项目中更可控、兼容性拉满的替代路径：
-
提升网格作用域：把本想塞进子网格的元素，直接作为父
.grid的子项。用grid-column/grid-row控制位置，而不是嵌套新容器 -
用
display: contents“透传”子元素（谨慎）：让中间 wrapper 不产生盒子，使子元素直接受父 grid 管理。注意它会破坏语义结构和可访问性，role和aria-*需手动补全 -
固定行高 +
align-items: start：对卡片类布局，用grid-auto-rows: minmax(120px, auto)配合overflow: hidden截断长文本，比依赖 subgrid 更稳定 -
CSS 自定义属性 +
calc()：例如父设--col-gap: 12px，子元素用width: calc((100% - var(--col-gap) * 2) / 3)模拟列宽，虽不能响应轨道变化，但视觉对齐足够可靠
如果你坚持要在移动端试 subgrid，必须加这三道保险
哪怕只是做技术验证或灰度发布，也得防止样式崩塌：
- 必须用
@supports (grid-template-columns: subgrid)包裹全部 subgrid 相关规则，否则旧浏览器会把整块 CSS 当语法错误丢弃 - 父容器的
grid-template-rows/columns必须显式声明（如1fr 1fr auto），不能用repeat(auto-fit, ...)—— 移动端 parser 对隐式轨道的识别率更低 - 子元素必须同时声明
grid-row或grid-column范围（如grid-row: 1 / -1），否则即使支持 subgrid，它也不知道该继承哪一段轨道
真正需要跨卡片对齐的移动端场景（比如商品列表的价格底边、按钮基线），最稳的解法从来不是等浏览器支持 subgrid，而是放弃“继承轨道”这个思路，转为控制“视觉终点”：用 margin-top: auto 推内容到底部，或用 min-height + flex-direction: column + justify-content: space-between 做局部对齐。subgrid 是个好工具，但它现在还不属于移动端的真实战场。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
