grid子项溢出因box-sizing默认content-box导致padding/border额外增宽；固定轨道需width:100%+border-box；fr单位更安全；gap与margin叠加不抵消；伪元素需显式设border-box。
Grid容器分配空间框架，子元素按自身盒模型规则在轨道内渲染——box-sizing 决定 padding 和 border 算不算进你写的 width，不设 border-box 就会悄悄撑破轨道。
grid-template-columns 中的 px/rem 为什么总被撑开？
因为 px、rem 轨道定义的是“内容区大小”，而子项默认 box-sizing: content-box，一旦加了 padding: 12px 和 border: 1px，实际总宽 = 轨道宽度 + 24px + 2px，必然溢出。
- 固定宽度轨道（如
200px）下，子项必须写width: 100%; box-sizing: border-box; -
fr单位相对安全——它分的是扣除gap后的剩余空间，不依赖子项尺寸声明 - 别混用
200px 1fr 1fr，改用minmax(200px, 1fr) 1fr 1fr，避免固定值挤占弹性空间
gap 和 margin 同时用，为什么间距翻倍还溢出？
gap 是网格容器级的刚性间隔，margin 是子项自身的外边距，二者不合并、不抵消，而是叠加计算。比如 gap: 12px + 子项 margin: 8px，相邻轨道边缘到子项边缘就是 20px，容器总宽还会额外多出这部分。
- 选一个统一控制：用
gap管列/行间距，子项去掉margin - 如果必须用
margin（比如对齐非 Grid 子项），就禁用gap，否则开发者工具里看到的 “Computed width” 会远超预期 -
gap不影响子项的padding或border，它们只吃轨道内部空间
为什么写了 box-sizing: border-box 还错位？
因为 * { box-sizing: border-box; } 不覆盖伪元素，而很多 UI 库、图标、清浮动代码依赖 ::before/::after，它们仍走默认 content-box，偷偷多占像素。
- 必须写全：
*, *::before, *::after { box-sizing: border-box; }，且放在所有 CSS 最顶部 - 检查开发者工具「Computed」面板里的
border-box size，比看width值更准 - 响应式断点里改
grid-template-columns时，记得同步确认子项padding在小屏下是否仍合理——文字一多就撑破，不是 Grid 问题，是盒模型没对齐
真正卡住人的从来不是 Grid 语法，而是 padding 和 border 那几像素的“隐形厚度”——它不报错、不警告，只在你调好 layout 后默默让最后一列换行、滚动条突然出现、或者 gap 看起来宽窄不一。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
