根本原因不是gap本身，而是gap参与容器总宽度计算且父容器未设max-width:100%；浏览器将列宽与gap相加，导致内容区超限溢出。
根本原因不是 gap 本身，而是 gap 参与了容器总宽度计算，而你没给父容器设 max-width: 100% 或约束其内容撑展行为。
为什么 gap 会悄悄撑宽 Grid 容器？
浏览器渲染 Grid 时，grid-template-columns 的列宽 + 所有 gap 值是**相加关系**，不是“在列宽内扣除”。比如：
-
grid-template-columns: 1fr 1fr+gap: 20px→ 实际占用宽度 = 容器内容区宽 + 20px - 若容器是
width: 100%且父级无max-width限制，这额外的 20px 就直接溢出视口 - DevTools 中能看到容器盒模型右边界明显超出 viewport 宽度
gap 和 margin 混用导致间距翻倍
Grid 子项上写了 margin-right: 12px，又在容器设了 gap: 12px，结果右侧多出 24px 空白 —— 这不是 bug，但会让最后一列被挤出边界。
- 现象：滚动条只在桌面端出现，手机端正常；或某列轨道宽度异常大
- 排查法：临时删掉容器的
gap，看滚动是否消失；再逐个禁用子项的margin - Chrome Layout 面板开启 Grid 轨道高亮，红色虚线若在末尾外扩，基本就是它
Bootstrap .row 的负边距和 gap 叠加更危险
Bootstrap 的 .row 默认带 margin-left: -15px / margin-right: -15px，本该被 .container 的 padding: 15px 抵消。但如果你在 .col 里嵌套 .row，又没给这个 .col 加 overflow-hidden 或 max-width: 100%，那负边距 + gap 就会双重溢出。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<div class="col-8"><div class="row gx-4">...</div></div>（.col-8缺少宽度兜底） - 正确做法：在嵌套入口加
overflow-hidden，如<div class="col-8 overflow-hidden"> -
gx-类只对.row生效，加在.col上完全无效（DevTools 查不到--bs-gutter-x）
修复必须三层协同：容器、轨道、子项
单靠 overflow-x: hidden 是掩耳盗铃，真正要控住的是宽度源头：
- 容器层：加
max-width: 100%，确保不突破父级；用box-sizing: border-box防止padding/border叠加 - 轨道层：改用
repeat(2, minmax(0, 1fr))替代裸1fr 1fr，让 gap 参与后剩余空间分配更可控 - 子项层：避免在 Grid 子项上设
margin，尤其margin-right；长文本加white-space: nowrap防撑破
最常被忽略的点：你改了 gap，却没同步检查父容器是否仍用着 width: 100% 而没配 max-width —— 这个组合在任何现代 CSS 布局里都是横向溢出的头号诱因。
