Grid布局中元素间距重叠主因是混淆gap、margin、padding作用范围：gap控制网格轨道间空白，应设于容器；避免给网格项设垂直margin以防偏移；padding按需设于容器或子项。
Grid 布局中元素间距重叠，通常不是 Grid 本身“出错”，而是对 gap、margin、padding 的作用范围和优先级理解有偏差。关键在于：grid gap 控制的是**网格轨道之间**的空白，不作用于单个元素内部或边界；而 margin 和 padding 影响的是元素自身盒模型，若设置不当，反而会破坏 grid 的对齐逻辑，甚至引发重叠。
用 grid-gap 统一控制网格项之间的间距
gap（或 row-gap/column-gap）是 Grid 布局中最干净、最推荐的间距控制方式。它在网格线之间插入空白，不改变项目尺寸，也不触发 margin 合并问题。
- 直接写在容器上：
display: grid; gap: 12px;—— 行与列间距均为 12px - 分别设置：
row-gap: 8px; column-gap: 16px; - 注意：gap 不作用于网格容器自身的 padding 区域，也不影响第一行/列顶部或最后一行/列底部的外边距
避免在网格项上滥用 margin
给 grid item 设置 margin（尤其是垂直方向的 margin-top/margin-bottom），容易导致意外交互：比如 margin 不会撑开行高，可能被“折叠”或使项目偏移，进而视觉上看起来像重叠。
- 除非明确需要脱离网格对齐（如浮动式装饰元素），否则不要给 grid item 设 margin
- 如果必须微调某一项位置，优先用
align-self/justify-self，而非 margin - 若用 margin，建议只在非轴向方向谨慎使用（如 flex 容器中常用，但 grid 中需格外留意）
padding 要设在容器还是子项？看设计意图
padding 是安全的，但归属要清晰：
立即学习“前端免费学习笔记（深入）”；
- 想让所有内容离容器边缘保持距离 → 给 网格容器 加
padding - 想让每个网格项内部内容留白 → 给 网格项 加
padding（不影响 grid 结构） - 两者可共存，但别混淆目的：padding 不会造成重叠，但过大的 padding 可能挤压内容导致换行或溢出
检查是否误用了 display: contents 或隐藏了网格线
某些情况下看似“重叠”，实则是视觉错觉：
- 子元素用了
display: contents，导致其子节点直接参与网格布局，原有结构丢失 - 设置了
grid-template-rows/columns但值太小（如minmax(0, 1fr)或0px），压缩了轨道空间 - 背景色没设或透明，让人误以为元素贴在一起；加临时背景色（如
background: #eee;）能快速定位真实占位
