旧版 Safari（iOS 15.4 前、Safari ≤10.1）完全静默忽略 gap，须双写 -webkit-grid-gap 与 gap 并用 @supports (display: grid) and (grid-template-columns: 1fr) 检测，同时提供 flex 降级及 margin 间隙模拟。
旧版 Safari（iOS 15.4 前、Safari ≤10.1）对 gap 完全静默忽略，写 gap: 12px 或 row-gap: 12px 都无效，必须双写带 -webkit- 前缀的属性，并配合 @supports 双条件检测，否则布局直接碎裂。
gap 属性必须手动双写 -webkit- 前缀
Autoprefixer 不会为 gap 补 -webkit-grid-gap，即使开启 grid: true 也只展开为 grid-row-gap/grid-column-gap。Safari ≤15.6 不认这些拆分写法，只认合写 + 前缀。
-
gap: 12px→ 必须写成-webkit-grid-gap: 12px; gap: 12px; -
gap: 8px 16px→ 对应-webkit-grid-gap: 8px 16px; gap: 8px 16px;（顺序不能颠倒） - 单独写
row-gap或column-gap在旧 Safari 中一律失效，连-webkit-前缀都不支持 - 所有网格项需统一设
box-sizing: border-box，避免后续用margin降级时尺寸错乱
@supports 必须同时检测 display: grid 和 grid-template-columns
只写 @supports (display: grid) 会让 Safari 10.1、iOS 15.6 这类“半支持”浏览器进入 Grid 分支——它们能解析 display: grid，但不支持 gap 或 fr，结果间隙消失、列宽崩塌。
- 正确写法：
@supports (display: grid) and (grid-template-columns: 1fr) - 错误写法：
@supports (gap: 1rem)（Firefox 63 前不支持，反而误拦现代浏览器） -
@supports块外必须提供降级样式，比如display: flex; flex-wrap: wrap;，因为 IE11 和 Safari ≤9 会直接忽略整个@supports块
gap 失效时用 margin 模拟比加前缀更可靠
当双写前缀仍不生效（如某些 Android WebView ≤76 或 Safari 14.1），或你已决定放弃 Safari ≤15.x 的原生 gap 支持，直接用 margin 是最稳的 fallback 方案。
立即学习“前端免费学习笔记（深入）”；
- 横向间隙：
.item { margin-right: 12px; }+.item:nth-child(3n) { margin-right: 0; } - 纵向间隙：
.item { margin-bottom: 12px; }+.grid { margin-bottom: -12px; }（抵消最后一行多余间隙） - 避免用
padding模拟：会撑大子项尺寸，破坏响应式比例；border同理，且影响边框样式语义 - 务必给网格容器加
width: 100%，防止上层未设宽的 flex 容器干扰margin计算
真正容易被忽略的是：旧 Safari 对 gap 的忽略是“静默”的——控制台无报错、DevTools 里该属性显示为灰色划掉、getComputedStyle(el).gap 返回空字符串。不打开 Safari 开发者工具的 Computed 面板确认 gap 是否生效，仅靠视觉判断，大概率会误以为是 CSS 写错了。
