真正要定位Grid引发的横向滚动，需从“谁撑宽body”和“Grid轨道生成”入手：清空body默认margin/padding、设html{overflow-x:hidden}、grid子项加min-width:0、禁用隐式行干扰、排查transform/fixed及vw精度问题。
直接设 html { overflow-x: hidden } 只是掩盖症状，真正要定位 Grid 引发的横向滚动，得从“谁偷偷撑宽了 body”和“Grid 轨道如何生成”两个层面动手。
检查 body 默认 margin 和 html 溢出控制是否到位
所有主流浏览器默认给 body 加 margin: 8px，在窄屏或 DPR=2 设备上，这 16px 就足以触发横向滚动条——哪怕你写了 overflow-x: hidden 在 html 上也无效，因为溢出源在 body 内部。
-
body { margin: 0; padding: 0; }必须写，padding: 8px是常见错误写法，会人为加宽 -
html { overflow-x: hidden; }要配body { overflow-x: visible; }，否则某些 Safari 版本下 fixed 元素定位会错乱 - 用 DevTools 的「Layout」面板 hover 查看
body边框外是否有不可见的 margin，比猜更准
识别 grid-auto-flow: column 的隐式行干扰
只写 grid-auto-flow: column 却不设 grid-auto-rows，Grid 仍按默认逻辑生成隐式行轨道，导致所有项被塞进第一行、容器没产生水平溢出，看起来像 Flex 布局，实则为 Grid 的隐式行在捣鬼。
- 必须显式声明
grid-auto-rows: max-content或固定值（如120px），否则列填充逻辑被干扰 -
grid-template-rows: 3这类写法完全无效：它锁死行轨道数，第 4 个项会跳到第 4 列第 1 行，而非向右延展 - 动态插入的卡片走的是隐式列轨道，起效的是
grid-auto-columns，不是grid-template-columns
排查 min-width: 0 和 min-content 隐性溢出
Grid 子项默认有 min-width: auto（即 min-content），遇到长单词、未约束的 img、table 或第三方组件内嵌的 div（比如弹窗库自带 min-width: 320px），就会强行撑宽容器。
- 对 Grid 容器子项统一加
min-width: 0，覆盖浏览器默认最小宽度计算 -
img、pre、iframe等顽固元素必须配max-width: 100%和height: auto - 用控制台执行
$$('*').forEach(el => el.style.outline = '1px solid red')快速扫描哪个轮廓“凸出来”
验证 transform/fixed 元素与 vw 单位的精度偏差
transform 和 position: fixed 元素虽脱离文档流，但其渲染边界仍可能参与视口计算；而 100vw 在有滚动条时 ≈ 视口宽度 + 滚动条宽度（12–17px），与 100% 不等价，窄屏下极易漂移。
- 给疑似
transform元素加transform: translateZ(0)，强制硬件加速重置溢出判定 - 检查
fixed元素是否同时设了left: 0和right: -20px，这种写法在旧版 Safari 下会误算宽度 - 媒体查询断点别写
@media (max-width: 768px)，改用@media (max-width: 767.98px)避免 DPR 导致的四舍五入漂移
最易被忽略的是：Grid 容器父级若为 display: flex 且未设 min-width: 0，在部分安卓 WebView 下会导致 overflow-x 失效——这不是 Grid 的问题，而是 Flex 的收缩行为劫持了滚动上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
