嵌套 grid 间距重叠的根源在于子网格项未设 box-sizing: border-box，导致 padding/border 溢出单元格边界；gap 仅作用于直接子项间，不控制子项内部 margin，需用 padding 或对齐属性替代内部 margin。
嵌套 Grid 时出现间距重叠，问题通常不在 gap 本身，而在于子网格项沿用 content-box 导致 padding/border 溢出单元格边界——必须给所有嵌套层级的网格容器和网格项显式设 box-sizing: border-box，否则 gap 看似生效，实际渲染仍错位。
为什么嵌套 Grid 容器设了 box-sizing: border-box 还是重叠
因为重叠往往来自子网格项（grid-item）内部：它若没设 box-sizing: border-box，又带 padding 或 border，就会在 content-box 下“偷偷加宽”，突破父级网格轨道分配的宽度。浏览器 DevTools 显示的“content area”宽度可能远小于你写的 width: 100%，但总宽已超单元格限制。
- 父级 Grid 容器设了
box-sizing: border-box，只管住自己，不继承给子项 - 子网格项若为
div且未重置，仍走默认content-box - 第三方组件（如
.ant-card）可能内部依赖content-box，全局重置后需单独回退
嵌套 Grid 中 gap 和 margin 的作用范围必须分清
gap 只控制父容器内直接子项之间的轨道间隙，对子项内部的 margin 完全无感。一旦嵌套一层 Grid，子项里的段落、按钮等元素仍按标准盒模型合并 margin，和外层 gap 并行不悖——结果就是“gap 设了 20px，但 p 标签之间只显示 16px”，实为 margin-collapse 在作祟。
- 不要在嵌套 Grid 的子项内部用
margin-top/margin-bottom控制间距 - 子项内部需留白，优先用
padding；需对齐，用align-self/justify-self - 若必须保留子项内
margin，可在父容器加border-top: 1px solid transparent阻断合并
如何一次性让所有嵌套层级尺寸可预测
靠局部设置容易漏，推荐全局统一规则，再针对性排除异常：
- 在根样式中写：
* { box-sizing: border-box; }（含*::before,*::after） - 加固表单控件：
input, textarea, select, button { box-sizing: border-box; } - 对已知依赖
content-box的第三方组件回退：.ant-card, .el-input { box-sizing: content-box !important; } - 检查嵌套 Grid 容器自身是否被
all: unset清掉box-sizing，若有，需显式重设
调试时最容易忽略的视觉陷阱
高 DPI 屏幕或缩放 125% 时，gap 渲染可能因 subpixel 四舍五入多占 1–2px；DevTools 的 “Show box model” 显示的是 border-box 总宽，但 “Computed” 面板里 width 值仍是 content 区宽度——这两个数不能直接比。真正要盯的是 getComputedStyle(gridContainer).width 返回值是否等于你设定的像素值，以及子项的 offsetWidth 是否稳定落在单元格分配范围内。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
