用gap属性是唯一能干净、可控、可响应地处理多行多列间隙的方式，必须清空子项margin、显式声明row-gap和column-gap以确保兼容性，并确认父容器display为grid或flex且满足对应条件。
用 gap，别碰子项的 margin —— 这是唯一能干净、可控、可响应地处理多行多列间隙的方式。其他方案要么语义错位，要么在换行、断点、浏览器兼容性上必然出问题。
gap 不生效？先确认 display 和容器状态
最常见的情况不是 gap 写错了，而是它根本没被识别。gap 只对 display: flex 或 display: grid 容器有效，对 block、inline-block、float 或 display: contents 完全静默忽略。
- 检查 DevTools 的 Computed 面板：搜索
gap，若没出现或显示0px，大概率是父容器display没设对 - Flex 场景下，
row-gap要配合flex-wrap: wrap才有垂直效果；只写column-gap时，跨行元素之间不会产生间距 - Grid 中若用了
grid-auto-flow: column，row-gap会失效——因为此时“行”的概念已由列流向覆盖 - 容器高度太小撑不开第二行时，
row-gap看似“消失”，加min-height或临时调高容器验证
响应式 gap 必须用媒体查询重设，不能靠 clamp()
gap 本身不响应，它只是个 CSS 长度值。所谓“响应式 gap”，本质是用媒体查询动态改写它的值。别在 gap 里直接写 clamp(0.5rem, 2vw, 1.5rem) —— Safari 13.1 之前不支持，且 vw 在窄屏下可能缩到 0，导致列贴死。
- 基础断点写最小值：
.grid { row-gap: 8px; column-gap: 12px; } - 平板起用中等值：
@media (min-width: 768px) { .grid { row-gap: 12px; column-gap: 16px; } } - 桌面端放宽：
@media (min-width: 1200px) { .grid { row-gap: 16px; column-gap: 24px; } } - 想减少重复？用 CSS 变量：
:root { --gap: 8px; } @media (min-width: 768px) { :root { --gap: 12px; } }，再统一写row-gap: var(--gap);
Safari 14.0 及更早版本必须拆开写 row-gap/column-gap
gap: 12px 或 gap: 12px 16px 在 Safari 14.0 及更早版本中会静默失效，连警告都不报。这不是 bug，是规范实现差异。
立即学习“前端免费学习笔记（深入）”；
- 稳妥写法永远是显式声明：
row-gap: 12px; column-gap: 16px; - 这样兼容 Chrome 66+、Firefox 63+、Safari 14.1+、Edge 16+
- 移动端想上下紧凑、左右宽松？直接改对应值：
row-gap: 8px; column-gap: 20px;，比gap: 8px 20px更可靠 - 千万别混用：
gap: 10px后又写row-gap: 15px—— 后者会覆盖前者
为什么清空子项 margin 是硬性前提？
子项自带 margin-bottom: 12px，在第三行末尾就会多出 12px 白空（无兄弟可折叠）；而 row-gap: 12px 只在第一/二行、第二/三行之间生效，上下边缘干干净净。
- 用
margin模拟 gap 会触发外边距折叠、首尾溢出、换行错位——尤其当内容行数动态变化时 -
gap不叠加、不抵消、不继承，它只管网格线/弹性轴之间的空白；margin仍会存在并叠加，造成意外交叉留白 - 子项若有
padding，再设gap: 1rem，视觉间距 ≈ 2rem —— 这不是设计意图，是两套逻辑强行叠加 - 正确做法：
* { margin: 0; }清底，再统一由容器控制节奏
真正难的不是写出 gap，而是坚持不用 margin 去“微调”——一旦开了这个口子，响应式断点、换行逻辑、浏览器兼容性就全乱了。间隙的本质是轨道之间的留白，不是元素自己的边界，这点语义错位，后面所有调试都会加倍费劲。
