Safari旧版（iOS 15.4前）不解析row-gap/column-gap，导致间隙失效；应改用gap合写、显式行列定位、固定列数及box-sizing: border-box修复。
不是间隙“多出来”，而是 Safari 旧版（iOS 15.4 之前）压根没解析 row-gap 或 column-gap，导致你写的间距根本没生效，视觉上反而像“被挤出空白”——其实是子项紧贴排列后，因内容换行、行高差异或父容器 overflow: hidden 裁剪造成的错觉。
gap 在 Safari iOS 15.4 前完全不认 row-gap/column-gap
旧版 WebKit 把 row-gap: 12px 当作无效声明静默丢弃，不会报错，也不会 fallback 到其他行为。你看到的“间隙”，大概率是以下之一：
- 文字在窄列中自动换行，造成行高撑开，看起来像有垂直空隙
- 父容器设了
overflow: hidden，而子项实际宽度因 padding/border + gap 推挤后超限，被裁掉一部分，边缘露出背景色，误以为是间隙 - 没设
box-sizing: border-box，border 或 padding 叠加 gap 后破坏网格对齐
必须统一改用 gap: 12px（单值）或 gap: 12px 16px（双值），且确保该声明出现在所有 grid-row-gap/column-gap 之前。
真机上 outline 不贴网格线？说明 Grid 根本没启动
临时加 outline: 1px solid red 到任意网格项上，如果 outline 紧贴文字或图片边缘，而不是按预期网格轨道对齐，那就不是“间隙问题”，而是 Grid 布局压根没生效：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 打开 Safari 开发者工具 → Computed 面板 → 搜索
display，若值不是grid，说明display: grid被忽略（常见于 Safari ≤10.1 或漏写-webkit-grid） - Styles 面板里看
grid-template-columns是否显示为空或none，这是最直接的失效证据 - 真机调试务必用
eruda（CDN 引入），它的 Grid 面板能显示真实轨道编号和元素占用区域，比桌面模拟器准得多
grid-template-areas 字符串一写错，整条规则就被静默丢弃
这不是 Safari 特有，但旧版尤其敏感：grid-template-areas: "header main" "footer" 因第二行单词数不一致，整条声明被跳过，布局退化为流式——你看到的“间隙”，其实是所有子项堆在左上角后，因 margin/padding 或默认行内换行产生的意外留白。
- 每行引号内单词数必须严格一致，空位用英文句点
.占位，如"header main" "footer ." -
grid-area值必须与模板中字符串逐字符匹配（大小写、连字符、空格全算），"user-stats"和user-stats不匹配 - 改用显式定位更稳：
header { grid-column: 1 / -1; grid-row: 1; }，避免依赖字符串解析
移动端列数异常 + 间隙错位，大概率是 auto-fit 被 Safari 忽略
repeat(auto-fit, minmax(280px, 1fr))) 在 iOS 15.3 及更早版本中常被整条跳过，降级为单列或报解析错误，导致所有子项纵向堆叠，再叠加行高/字体渲染差异，就形成“不规则间隙”。
- 小屏优先用固定列数：
grid-template-columns: repeat(2, 1fr)，再配合@media (min-width: 768px)升级为 auto-fit - 别用
auto-fill—— 它会渲染空列，影响语义和可访问性，且旧 Safari 对其支持更差 - 若必须用 auto-fit，加 JS 检测：
CSS.supports('grid-template-columns: repeat(auto-fit, 1fr))')，不支持时切换 class 启用 Flexbox 降级
最常被忽略的是：Safari 旧版对 gap 的渲染存在微小偏移（比如标称 12px 实际 12.3px），在 touchstart 坐标判断时会导致热区错位，这和 CSS 间隙本身无关，但表现类似。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
