grid-gap 会增加容器总宽度，导致横向溢出；需配合 max-width、box-sizing 和 minmax() 合理控制，避免与 margin 叠加或内容撑破轨道。
grid-gap 会占用容器总宽度，但很多人没把它算进去
浏览器计算 Grid 容器总宽时，是把所有列宽 + 所有 gap 值加起来的。比如 grid-template-columns: 1fr 1fr（两列均分），再加 gap: 20px，那实际渲染宽度 = 容器内容区宽度 + 20px，而不是“两列各占 50% 就完事”。如果父容器本身是 width: 100% 且无 max-width 限制，这个额外的 20px 就可能让整行超出视口，触发横向滚动。
常见错误写法：
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
width: 100%; /* 没设 box-sizing: border-box，也没约束 max-width */
}
修复建议：
- 给容器加
max-width: 100%，强制它不撑破父级 - 确保父容器用了
box-sizing: border-box（尤其当它还有padding或border） - 用
grid-template-columns: repeat(2, minmax(0, 1fr))替代裸1fr 1fr，能更稳妥地处理 gap 参与后的剩余空间分配
gap 和 margin 混用导致间距叠加，视觉上“宽了一倍”
你在 Grid 子项上写了 margin-right: 12px，又在容器上写了 gap: 12px，结果两个间距同时生效——这不是 bug，是预期行为。但视觉上子项右侧就多了 24px 空白，容易让最后一列被挤出容器边界。
典型现象：滚动条只在桌面端出现，手机端正常；或者 DevTools 里看到某列轨道宽度异常大，但代码里没写固定宽。
排查方法：
- 在 Elements 面板中临时删掉容器的
gap，看滚动条是否消失 - 再逐个禁用子项的
margin、padding，观察变化 - 用 Chrome 的 “Layout” 面板打开 Grid 轨道高亮，看红色虚线是否在末尾明显外扩
auto-fit + minmax() 下 gap 让隐式轨道变宽，内容被迫换行
repeat(auto-fit, minmax(200px, 1fr)) 是响应式列数的常用写法，但它有个隐藏前提：gap 会参与“剩余空间”的计算。当容器宽度刚好卡在临界点（比如 619px），两列 + 一个 gap（20px）刚好塞下，但三列 + 两个 gap（40px）就超了——这时 Grid 会退回到两列，并把每列拉到 (619px - 20px) / 2 = 299.5px。如果其中某个子项内有长单词或未折行的 <pre class="brush:php;toolbar:false;"></pre>，它就会撑开这 299.5px 的轨道，最终溢出。
关键点：
-
minmax(min-content, 1fr)中的min-content由内容决定，不是你写的 200px - 一个没设
max-width: 100%的@@##@@或<iframe></iframe>，会直接突破轨道限制 - 用
overflow-x: hidden掩盖问题，只会让内容被裁切，不解决根本
旧版写法 grid-gap 和 gap 同时存在引发兼容性错乱
虽然现代浏览器都支持 gap，但如果你在 CSS 里同时写了：
.container {
grid-gap: 16px;
gap: 16px;
}
某些旧版 Safari 或 Android Webview 可能只认 grid-gap，而忽略 gap；但另一些环境（如部分构建工具插入的 autoprefixer 输出）又可能把 gap 编译成带前缀的 -webkit-gap，和原始 grid-gap 冲突，导致最终计算出两个 gap 值。
安全做法：
- 统一只用
gap，不写grid-gap - 确认构建流程没自动注入重复声明（查打包后 CSS 文件）
- 需要兼容 IE？别用 gap，改用
margin+calc()控制子项宽度，或直接降级为 Flex
真正难调的不是 gap 本身，而是它和内容弹性、盒模型、响应式断点之间那层微妙的耦合——漏掉任意一环，横向滚动就悄悄出现了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
