gap是响应式网格中控制间距的唯一推荐方式，因margin会导致末行空白、换行错位及断点维护困难，而gap作用于轨道间、边缘干净、响应式零维护；兼容性需拆分为row-gap和column-gap声明。
gap 是响应式网格中控制间距的唯一推荐方式，其他方案（如子项 margin 或容器 padding 模拟）都会在换行、断点切换或内容动态变化时出问题。
为什么不能用子项 margin 控制网格间距
子项写 margin-bottom: 12px 会导致第三行底部多出一截空白——因为最后一行没有兄弟节点可折叠外边距；而 gap 只作用于相邻轨道之间，上下左右边缘干干净净。另外：
• margin 在 auto-fit 切换列数时需重写选择器或 JS 控制类名
• margin 和 padding 混用会让视觉间距翻倍，且无法通过媒体查询统一调控
• IE 完全不支持 gap，但这是兜底问题，不是设计逻辑问题——应先写好现代方案，再按需加 :nth-child() 回退
gap 兼容性必须拆成 row-gap 和 column-gap
Safari 14.0 及更早版本对单值 gap 静默忽略，gap: 12px 16px 同样无效。稳妥写法是直接放弃简写：
• 必须写两行：
container {<br> row-gap: 12px;<br> column-gap: 16px;<br>}
• 这样 Chrome 66+、Firefox 63+、Safari 14.1+、Edge 16+ 全覆盖
• 想让移动端垂直节奏紧凑？改
row-gap: 8px 即可，不用动列逻辑• 注意：若已写
gap: 10px，再加 row-gap: 15px，后者会覆盖前者
响应式 gap 值怎么设才不翻车
固定像素（如 gap: 20px）在小屏显拥挤、大屏显稀疏，应结合单位与函数：
• 优先用 clamp(0.5rem, 2vw, 1.5rem)：最小不窒息，最大不发散
• 小屏（row-gap: 0.75rem; column-gap: 1rem，大屏翻倍也合理
• 不要用 % 单位设 gap，它不基于父容器宽度计算，行为不可控
• 如果框架（如 Bootstrap）用 g-3 类，就别在同个容器上再写 CSS gap，避免冲突
gap 失效？先检查这四个硬条件
gap 不报错、不警告，只静默失效，常见卡点：
• 父容器 display 不是 grid 或 flex（比如被 display: contents 覆盖）
• 子项用了 display: none —— 它不参与 gap 计算
• 设置了 grid-auto-flow: column，但只写了 column-gap，row-gap 对列流向无效
• 容器高度太小，撑不开第二行，row-gap 看似“消失” —— 加 min-height: 200px 验证一下
真正麻烦的不是写不对 gap，而是写对了却忘了清空子项自带的 margin 或冗余 padding；一套布局节奏由容器 gap + 外层 padding 承担，其余一律归零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
