横向滚动条源于grid容器总宽超可用宽度，主因包括：100vw含滚动条宽度、gap与列宽叠加溢出、子项margin/min-width撑开容器、fr与百分比混用误差，以及html/body未重置。
横向滚动条不是 Grid 本身的问题，而是 grid-template-columns 定义的列总宽度超出了容器可用宽度——尤其当用了固定单位、未处理 gap 或忽略滚动条占位时，浏览器会老实不客气地加一条 overflow-x: auto 出来。
检查 grid-template-columns 是否隐式超宽
用 repeat(auto-fit, minmax(120px, 1fr)) 这类写法时，很多人以为“auto-fit 就是安全的”，但其实它只管“能不能塞下”，不管“塞下后总宽会不会爆”。比如：
- 容器设了
width: 100vw，但 body 有默认margin: 8px→ 实际可用宽度 =100vw - 16px - 又加了
gap: 24px，5 列就多出4 × 24px = 96px的额外间隙 - 最终列宽 + gap 总和 > 可用宽度，浏览器只能撑出横向滚动条
验证方法：在 DevTools 的 Layout 面板里看该 Grid 容器的 Actual width 和 Scroll width，如果后者明显更大，就是它了。
100vw 在有垂直滚动条时会“多算”宽度
Chrome/Firefox（Windows）下，100vw 包含垂直滚动条本身的宽度（约 17px）。也就是说，哪怕你写了 width: 100vw，实际渲染宽度是「视口宽度 + 滚动条宽度」，必然超出内容区。
立即学习“前端免费学习笔记（深入）”；
- 典型触发场景：
.grid { width: 100vw; grid-template-columns: 1fr 1fr; }+ 页面内容过长 - 解决方案：优先换用
width: 100%—— 它基于父容器内容区计算，天然避开滚动条干扰 - 如果必须用视口单位，改用
width: 100dvw（dvw是动态视口单位，排除滚动条）
子项 margin 和 min-width 会偷偷撑开 Grid 容器
Grid 容器不会像普通块级元素那样“截断”子项的 margin；子项的 margin-right 或 margin-bottom 会实打实地向外推，导致容器整体变宽。
- 常见诱因：子项是图片、
<pre class="brush:php;toolbar:false;"></code>、未设 <code>min-width: 0</code> 的 flex 容器，或含长单词的文本块</li><li>临时排查：给所有直接子项加 <code>margin: 0 !important</code>，看横向滚动条是否消失</li><li>稳妥修复：对可能溢出的子项统一加 <code>min-width: 0; overflow-wrap: break-word;</code></li></ul><H3>gap 和 fr 单位配合不当也会引发误差</H3><p><code>fr</code> 单位本身不导致溢出，但和百分比、固定值混用时容易翻车。例如：</p><pre class="brush:php;toolbar:false;">grid-template-rows: 30% 70%; gap: 12px;</pre><p>浏览器先按百分比分高度，再加 <code>gap，结果总高略超 100%，纵向滚动条跟着来了。- 正确做法：全用
fr，让 gap 自动纳入剩余空间分配，比如grid-template-rows: 3fr 7fr - 如果要保留视觉比例感，用
clamp()替代固定最小值，如minmax(clamp(80px, 15vw, 120px), 1fr)，避免横屏下因最小值卡死列数
最常被忽略的一点：问题往往不出在 Grid 代码本身，而出在它外层的
html/body重置没做全——margin、padding、box-sizing缺一不可。 - 正确做法：全用
