gap是唯一正确控制网格/弹性布局轨道间隙的属性，应清空子项margin、用row-gap和column-gap分开声明以确保兼容性，并避免与padding/margin混用。
gap 是唯一该用的属性，别碰子项 margin
Grid 的间隙本质是“轨道之间”的空白，gap 是唯一原生匹配这个语义的属性。用 margin 给子项加间距，会触发外边距折叠、首尾溢出、换行错位——尤其是当内容行数动态变化时，第 n 行末尾总多出一截空白。
真正该做的，是清空所有子项的 margin，把节奏全交给容器：gap: 1rem 就能干净地控制所有相邻轨道间的距离，边缘不溢出、不塌陷、不依赖兄弟节点存在。
- 子项写
margin-bottom: 12px→ 第三行底部白空 12px（无兄弟可折叠） - 容器写
gap: 12px→ 只在第一/二行、第二/三行之间生效，上下边缘干干净净 - 响应式改列数时，
gap不用重写选择器；margin方案得配:nth-child()或 JS 控制类名
兼容性兜底必须拆开写 row-gap 和 column-gap
gap: 12px 在 Safari 14.0 及更早版本里静默失效；gap: 16px 8px 同样不认——它只支持分开声明的 row-gap 和 column-gap。
稳妥写法就是直接放弃单值 gap，老老实实写两行：
container {
row-gap: 12px;
column-gap: 12px;
}
这样 Chrome 66+、Firefox 63+、Safari 14.1+、Edge 16+ 全都支持。想让移动端垂直节奏紧凑点、横向留白宽松点？直接改对应值：row-gap: 8px; column-gap: 16px;，比 gap: 8px 16px 更可靠。
- 别混用：
gap: 10px后又加row-gap: 15px→ 后者会覆盖前者 - IE 完全不支持
gap，需回退到margin+:nth-child模拟，但语义断裂、维护成本高
gap 失效？先检查这四个硬条件
浏览器对 gap 静默忽略，不是 bug，是前提没满足。常见卡点：
- 父容器
display不是grid或flex（比如仍是block，或被display: contents覆盖） - 子项用了
display: none→ 它不参与gap计算；visibility: hidden则仍占位、受gap影响 - Grid 设置了
grid-auto-flow: column，但只写了column-gap→row-gap对列流向无效 - 容器高度太小，撑不开多行，
row-gap看似“消失” → 加min-height或调高容器验证
gap 和 padding/margin 混用等于自找麻烦
gap 不叠加、不抵消、不继承。它只管网格线之间的空白，其他空间归其他属性管。
子项自带 padding: 1rem，再设 gap: 1rem，视觉间距 ≈ 2rem —— 这不是设计意图，是两套逻辑强行叠加。
- 正确做法：子项统一清空
margin和冗余padding，所有布局节奏由容器gap+ 外层padding承担 - 卡片内容区需要内边距？用
padding；卡片之间需要呼吸感？用gap—— 别指望靠调大gap来“补偿”子项的padding - 真要给某个子项额外留白（比如最后一个按钮离底部更远），单独加
margin，但必须确认父容器没设align-items: stretch等导致 margin collapse 的条件
gap，而是当设计稿里出现“第一组卡片间距 24px，第二组缩到 8px”时，得意识到这不是 gap 能解决的问题——那是语义分组，得靠嵌套容器或伪类区分。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
