gap导致溢出的根本原因是box-sizing未生效或被覆盖，使padding与gap叠加后内容区超限；fr单位可避坑，因浏览器先扣gap再分剩余空间。
gap 本身不增加容器总宽度，但会直接导致视觉溢出——根本原因几乎总是 box-sizing 没生效或被覆盖。
为什么 box-sizing: border-box 必须显式设置
很多人以为写了 box-sizing: border-box 就高枕无忧，其实它不会继承，也不一定生效：
-
display: grid容器默认是box-sizing: content-box，哪怕父元素设了border-box，它也收不到 - CSS-in-JS 或 scoped style 中，选择器优先级不够时，会被重置样式（如
* { box-sizing: border-box }）漏掉 —— 特别是没写*::before, *::after的老版 normalize.css - DevTools 的 Computed 面板里查不到
box-sizing: border-box？那它就是没生效
gap + padding 叠加时的真实宽度计算逻辑
当容器有 width: 300px 和 padding: 10px，它的 content area 实际只有 280px。此时再加 gap: 20px，Grid 轨道必须在 280px 内排布：列宽总和 + gap 总和 ≤ 280px。
- 用百分比列（如
25% 50% 25%）+gap→ 计算变成100% + gap × (列数 − 1)，必然超 100% - 用
fr单位（如1fr 2fr 1fr）→ 浏览器先扣掉 gap 总和，再分剩余空间，天然避坑 -
minmax(200px, 1fr)在窄屏下仍会卡死在 200px，哪怕 content area 只剩 180px —— 这时 gap 会让它更早溢出
快速验证与修复步骤
别猜，用 DevTools 直接定位：
- 选中 Grid 容器 → Computed 面板确认
box-sizing是border-box，不是content-box - Layout 面板勾选 “Show box model”，看 padding / content 区域是否已撑满 border box
- 临时加一句
* { box-sizing: border-box }到顶部 CSS，看溢出是否消失 —— 如果消失了，说明就是继承/覆盖问题 - 修复后记得删掉通配符写法，改用精确选择器：
.grid-container { box-sizing: border-box; }
最常被忽略的一点：gap 的像素值在 subpixel 渲染下可能被浏览器向上取整（尤其缩放或高 DPI 屏幕），哪怕理论计算刚好卡在边界，也可能差 1–2px 就触发滚动条 —— 所以 box-sizing 必须稳，不能靠“差不多”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
