直接禁用 body 默认外边距并强制裁剪溢出内容可解决90%窄屏水平滚动问题；需设 body { margin: 0; padding: 0; box-sizing: border-box }，Grid子项加 min-width: 0 和 overflow: hidden，慎用 auto-fill，确保 html/body 高度链完整。
直接禁用 body 默认外边距 + 强制裁剪溢出内容，就能解决 90% 的窄屏水平滚动问题。不是加 overflow-x: hidden 就完事，那只是掩盖症状。
先清空 body 默认 margin
所有现代浏览器（Chrome/Firefox/Safari）默认给 body 设了 margin: 8px。在窄屏下，这 16px 水平空间会直接触发横向滚动条，哪怕你写了 overflow-x: hidden 在 html 上也无效——因为溢出源在 body 内部。
必须写：
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}注意：padding: 0 是关键，网上有些方案写 padding: 8px 是错的，它会人为加宽，让问题更糟。
立即学习“前端免费学习笔记（深入）”；
Grid 容器子项必须显式约束宽度
常见错误是 Grid 子元素含图片、文字块或动画元素，它们在窄屏下可能撑破容器宽度。比如：
-
<img>没设max-width: 100%，原始尺寸大于视口 - 用 GSAP 或 CSS
transform: translateX()平移时，元素仍参与布局计算 - 子项用了
white-space: nowrap且内容过长，无法折行
统一加防御性样式：
.grid-container > * {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
<p>.grid-container img {
max-width: 100%;
height: auto;
}慎用 grid-template-columns: repeat(auto-fill, ...) 在窄屏
这个函数在小屏幕下容易因最小项宽（如 minmax(200px, 1fr)）导致总列宽远超视口，浏览器会强制拉伸或溢出。窄屏应优先用 grid-auto-flow: column + grid-auto-columns: 100% 控制单列满屏滚动，而不是试图塞多列。
如果必须多列，改用：
@media (max-width: 480px) {
.grid-container {
grid-template-columns: 1fr;
}
}而不是依赖 auto-fill 自动计算——它的“填满”逻辑在窄屏下不可控。
检查 html 和 body 高度链是否断裂
Grid 容器若设了 height: 100vh 或 max-height 却仍溢出，大概率是父级没传高。窄屏下尤其要注意：
-
html和body都要设height: 100%（或100dvh，Safari 更稳） - 避免在中间层用
flex包一层 Grid 容器却不设min-height: 0，否则 flex 会阻止子元素收缩 - 移动端不要依赖
100vh做滚动区高度，地址栏收放会导致跳变；改用calc(100vh - 60px)或100dvh
最易被忽略的一点：水平滚动常是垂直方向失控的副作用。比如一个未设 max-height 的 Grid 容器撑高了页面，间接导致 body 宽度被重新计算而溢出——所以得从高度链开始查，不能只盯 overflow-x。
