grid子项的margin与gap叠加而非替代，导致间距忽大忽小；margin不影响相邻子项间距，仅gap控制网格项间隔；嵌套元素margin仍会合并，需单独处理。
Grid子项的margin和gap会叠加，不是“替代”关系
你看到的“不一致”，大概率是gap和子项margin在同时起作用。浏览器不会智能判断“这里该用哪个”，而是把二者数值直接相加：比如gap: 12px + margin: 12px，某些方向就变成24px，另一些方向因margin折叠反而变小——视觉上自然忽大忽小。
常见错误写法：
.grid { gap: 12px; }
.item { margin: 12px; }
这种组合在DevTools的Computed面板里能清楚看到row-gap和margin-top并存，数值相加即为实际距离。尤其在auto-fit + minmax()响应式布局中，最后一行右边缘溢出、小屏出现横向滚动条，基本都源于此。
Grid子项的margin根本不会影响相邻子项间距
这不是bug，是规范行为：display: grid会让直系子项脱离普通文档流，垂直方向的margin-top/margin-bottom完全不参与间距计算；水平方向的margin-left/margin-right也一样，对齐和间隔全部由gap接管。
你给.item写margin: 20px，它依然会撑开自身盒模型（影响内部内容与边框的距离，或与容器padding的相对位置），但不会让隔壁的.item离得更远。
所以如果你发现子项之间还有空隙，那99%是gap值，不是margin生效了。
嵌套块元素的margin仍会合并，但和Grid无关
gap只作用于网格容器的**直接子元素之间**，它不穿透、不接管、不阻止子元素内部的盒模型行为。
比如.grid-item里面有个<p></p>和一个<h3></h3>，它们之间的margin-bottom/margin-top仍会折叠——哪怕外层.grid设了gap: 30px。
这时候问题已不在Grid层，而是回到传统流式布局的老问题：相邻块级元素垂直margin自动合并为较大值。规避方法包括：
- 统一只设
margin-bottom，顶部不留空 - 用
padding替代部分margin（父容器加padding更可控） - 在父容器上触发BFC（如加
overflow: hidden），但要小心影响布局
怎么安全地切换到gap控制间距
不是删掉margin就完事。必须同步做三件事，缺一不可：
- 确认父容器是
display: grid（不是block或误写的grid-flow） - 所有网格项统一重置：
.item { margin: 0; }（包括单独声明的margin-top、margin-right等） - 用
gap控制项间距离：.grid { gap: 12px; }（单值等效于row-gap: 12px; column-gap: 12px;）
若需外边距（比如整个网格离上方标题留空），只在容器自身设margin-top，别动子项。
最容易被忽略的是嵌套层级：你改好了.grid的gap，但忘了.item内部的p和h3还在互相折叠margin——那视觉上还是“不一致”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
