gap属性在移动端失效主要因旧版safari（ios 14.4及更早）、android webview（≤75）等内核不支持；应改用grid-row-gap和grid-column-gap，并确保列定义有弹性（如1fr）以预留gap空间。
gap属性在移动端失效，先确认是不是Safari旧版或WebView内核
iPhone 12以下机型若系统未升级到iOS 14.5+，Safari仍用WebKit旧引擎，gap会被静默忽略；微信X5、QQ浏览器、部分安卓内置WebView（如Android 7–9的系统浏览器）也常卡在Chrome 75或更早内核，不识别gap。别靠“看起来像”判断，直接打开Safari开发者工具 → Computed面板搜索gap，值为空或标着not supported就是实锤。
常见误判点：gap: 12px在桌面Chrome看着正常，一上真机就贴死——不是代码问题，是渲染引擎根本不吃这一套。iOS 14.4及更早、所有IE、Edge 16–18、Android WebView ≤ 75 都属于“gap黑洞”。
用grid-row-gap和grid-column-gap替代gap能绕过部分兼容问题
虽然gap是Level 2标准，但Safari 10.1–14.0、Chrome 56–65这些中间版本只认分开写的grid-row-gap和grid-column-gap。它们不是“备用写法”，而是当时唯一有效的声明。
- 必须同时写两个：只写
grid-row-gap: 12px，列方向间隙依然为0 - 别混用：
gap: 12px和grid-row-gap: 12px共存时，旧引擎可能因解析冲突直接丢弃全部 - autoprefixer需显式启用
grid: true，且源码里必须写gap才能触发补全——写grid-gap它不会转
用margin模拟gap时，box-sizing: border-box和flex-shrink: 0缺一不可
靠margin fallback最稳，但默认行为会让子项撑破容器宽度。比如width: 50% + margin-right: 12px，两列加起来就超100%，导致换行或滚动条意外出现。
- 所有grid item必须加
box-sizing: border-box，否则padding/border会额外增加尺寸 - 横向间隙推荐
.grid > *:not(:first-child) { margin-left: 12px; }，但iOS Safari 13.x不支持:not()，得改用.grid > *:nth-child(n+2) - 如果子项内容长（比如长文本或图片），必须加
flex-shrink: 0，否则margin-left会被压缩吞掉 - 最后一行/列的多余margin要用
:nth-child(2n+1)或媒体查询精准清除，不能只清:first-child
真正容易被忽略的坑：grid-template-columns写死像素，gap就没空间可分配
写了gap: 16px但没看到空隙？检查grid-template-columns是否用了固定值，比如500px 500px。如果容器总宽刚好是1000px，浏览器会优先保证列宽，把gap压成0——这不是bug，是规范定义的“轨道尺寸优先级”。
解决方法不是调大容器，而是让列有弹性：1fr 1fr或minmax(0, 1fr) 1fr，给gap留出生效余地。另外，某些响应式断点里grid-template-columns退化为1fr单列时，column-gap自然不可见（但row-gap仍有效），这点常被漏测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
