gap是grid布局中设置轨道间距的最稳妥方式，因其原生匹配“轨道间空白”语义，避免margin导致的塌陷、首尾溢出及响应式维护难题；兼容性需用row-gap/column-gap分开声明。
直接用 gap，别碰子元素的 margin —— 这是最快、最稳、最不易翻车的方式。
为什么 gap 比 margin 更适合 Grid 多行多列等间距
Grid 的间隙本质是“轨道之间”的空白，gap 是唯一原生匹配这个语义的属性；而 margin 是盒模型级的外边距，强行塞进 Grid 会干扰轨道计算、触发折叠、导致首尾行/列意外留白。
- 写
margin-bottom: 12px给每个子项，第 n 行末尾会多出 12px 空白（因为没兄弟可折叠） -
gap: 12px只在相邻轨道间生效，容器边缘干净，不溢出、不塌陷 - 响应式切换列数时，
margin方案要重写选择器或 JS 控制类名；gap只需改容器样式，无副作用
gap 单值 vs 双值写法：什么时候必须拆开写
单值 gap: 12px 最简洁，但 Safari 14.0 及更早版本不支持；双值 gap: 16px 8px 在 Safari 14.0 中也失效——它只认分开声明的 row-gap 和 column-gap。
- 兼容性兜底写法：
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—— 后者会覆盖前者
常见失效场景：写了 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
真正难的不是写对 gap，而是当设计稿里出现“第一组卡片间距 24px，第二组缩到 8px”时，得意识到 gap 本身不支持轨道级差异化——这时候该拆容器，而不是硬调值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
