gap是布局层原生控制，margin是元素级副作用；gap作用于网格轨道间且不参与折叠，而margin由子项自行声明并可能叠加或合并，二者共存会导致间距异常，需清空子项margin才能正确使用gap。
gap 是布局层原生控制，margin 是元素级副作用
gap 直接作用于网格轨道之间，属于布局引擎的“内建逻辑”；它不修改任何子元素的盒模型，也不参与 margin 折叠、不触发重排计算。而 margin 是每个子项自己声明的外边距，浏览器会为每个元素单独计算、叠加、甚至折叠——比如两个相邻 p 元素的 margin-bottom 和 margin-top 会合并成一个值，但你根本没打算让它们“合并”。这种不可控性在 Grid 中尤其危险：你设了 gap: 16px，又给每个 .item 写了 margin: 8px，结果某些方向出现 24px，另一些方向只剩 8px。
gap 不会和子元素 margin 叠加，但也不会自动归零它
这是最常踩的坑。写了 gap: 12px 后发现间距翻倍，不是 gap 失效，而是你忘了重置子项的 margin。浏览器不会“智能覆盖”，而是实打实相加：gap 在轨道间挖出 12px 空白，margin 又从每个子项自身往外推 12px，视觉上就变成 24px。DevTools 的 Computed 面板里能看到 row-gap: 12px 和 margin-top: 12px 同时存在。要真正用好 gap，必须同步做三件事：
-
.grid { display: grid; }—— 确保容器已进入 Grid 上下文 -
.item { margin: 0; }—— 所有直接子项清空 margin（包括margin-left、margin-bottom等单独声明） -
.grid { gap: 12px; }—— 仅靠容器统一控制，不再分散到子项
gap 支持响应式与差异化设计，但有硬性边界
gap 可以用 clamp() 或媒体查询动态调整，比如 gap: clamp(8px, 2vw, 24px)，这在 margin 上很难安全复现。但它也拒绝“局部定制”：设计稿要求“第一组卡片间距 24px，第二组缩到 8px”，gap 无法通过选择器区分处理——它只认容器，不认子项身份。此时必须拆成两个独立容器，各自设 gap。试图用 .group-1 .item:nth-child(n) { margin: 0; } 去 hack，只会让 margin/gap 混合逻辑更难维护。
Safari/Edge 兼容写法必须显式拆分 row-gap 和 column-gap
Safari 14.0 及更早版本不支持 gap: 12px 8px 或单值 gap: 12px，但能识别 row-gap: 12px 和 column-gap: 8px。所以稳妥写法永远是分开声明，而不是依赖简写。另外，IE 全系不支持，@supports (gap: 1rem) 在 IE 下返回 false 却不报错，无法兜底——真要兼容，得靠 JS 检测或服务端 UA 判断。还有个细节：gap 不支持百分比单位，gap: 5% 会被浏览器静默忽略，只能用 px、rem、em 或 clamp()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
