gap属性在移动端多列网格中需注意三点：ios旧版safari仅支持合写gap而非row-gap/column-gap；父容器overflow:hidden会裁剪gap推挤导致的溢出；子元素margin与gap叠加造成间距翻倍，须重置为0。
gap 属性本身就能精准统一移动端多列网格间隙，但错乱往往不是 gap 写错了，而是它被其他布局条件“吃掉”或“压住”了。
gap 在 iOS Safari 旧版本里不认 row-gap/column-gap 单独写法
如果你在 iOS 15.4 之前的 Safari 上看到列间距正常、行间距消失，大概率是写了 row-gap: 12px 却没写 column-gap，或者只写了其中一个。旧版 Safari 只解析合写的 gap，对拆开的属性直接忽略。
- 必须统一用
gap: 12px或gap: 8px 12px（注意顺序：先row-gap，后column-gap） - 避免在同一个规则里混用：
gap: 12px和row-gap: 20px同时出现，后者会覆盖前者 - 如果必须兼容 iOS 14 或更早，保险起见显式写全：
row-gap: 12px; column-gap: 12px;
父容器 overflow: hidden 导致 gap “看起来消失”
这不是 gap 失效，而是子项因 gap 推挤后总宽度超出容器，被 overflow: hidden 裁掉了——尤其常见于轮播外层、卡片列表容器或设置了固定 width 的 wrapper。
- 检查父容器是否带
overflow: hidden、width硬约束，或box-sizing: content-box - 加
box-sizing: border-box防止 padding/border 挤占可用空间 - 用开发者工具选中容器，看 computed width 是否被 gap “撑爆”；若超了，改用
max-width: 100%或去掉硬宽
grid-auto-flow: column + gap 在 iOS 旧版 Safari 中完全不生效
当使用 grid-auto-flow: column 让 Grid 自动按列填充时，iOS 15.4 之前的所有 Safari 版本都忽略 gap —— 行列间隙全无，子项紧贴排列。
- 这不是 bug，是规范实现缺失；别挣扎，换方案
- 改用
display: flex; flex-direction: column; flex-wrap: wrap;+gap（Flex 的gap在同版本 Safari 中支持更好） - 或者退回到传统方式：
display: block+float: left+margin-right，但需手动处理最后一列清除
gap 和子元素 margin 叠加导致视觉间距翻倍
最隐蔽也最常复现的问题：你设了 gap: 12px，又给每个卡片写了 margin: 12px，结果垂直/水平方向实际空隙变成 24px，且小屏下容易触发横向滚动条。
- 必须重置所有网格项的 margin：
.grid > * { margin: 0; } - gap 是容器级布局属性，和子项 margin 完全独立，浏览器不会抵消，只会相加
- 如需整体外边距（比如卡片组离上方标题的距离），只给容器加
margin-top，别碰子项
真正卡住人的地方，往往不在 gap 怎么写，而在于它是否“被允许生效”——有没有被父容器裁掉、有没有被旧浏览器跳过、有没有被子元素自己的 margin 暗中加码。动手前先打开 DevTools 看一眼 computed 样式里的 row-gap 和 column-gap 值是否如预期解析出来，比猜要快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
