横向滚动条出现是因元素实际宽度超容器（哪怕1px），gap 占像素空间却不参与百分比计算，导致总宽超100%；正确写法用 1fr 1fr 1fr 或 minmax() 配合 overflow-x: auto、min-width: 0 及 html { overflow-x: hidden } 等综合处理。
横向滚动条不是 Grid “出 bug”了，而是某个元素实际宽度超出了容器——哪怕只多 1px，浏览器就会老老实实加 overflow-x: auto。
为什么加了 gap 就突然出现横向滚动？
gap 本身不参与 grid-template-columns 的百分比计算，但它占真实像素空间。如果子项原本就撑满容器（比如一张没设 max-width: 100% 的图片），gap 就是压垮骆驼的最后一根稻草。
-
grid-template-columns: repeat(3, 33.33%) + gap: 16px→ 实际总宽 = 99.99% + 32px，大概率超 100% - 正确写法是
1fr 1fr 1fr：浏览器会先扣除所有gap，再均分剩余空间 -
minmax()里的第一个参数（如minmax(120px, 1fr)）是固定像素，横屏时反而卡死列数，导致内容撑宽
为什么 grid-auto-flow: column 还是不横向滚动？
只设 grid-auto-flow: column 不会触发横向滚动，它只是告诉 Grid “新项往右插”，但不会自动让容器产生水平溢出。
- 必须配合
grid-auto-columns: minmax(160px, 1fr)（定义每列宽度） - 必须设置
overflow-x: auto（暴露滚动能力） - 别写
grid-template-columns：动态列表项进的是隐式列轨道，起效的是grid-auto-columns，不是显式列声明 - 漏掉
min-width: 0给 grid item：默认min-width: auto会让图片、文本拒绝压缩，直接撑破列宽
哪些“看不见”的地方最容易偷偷撑宽？
横向滚动常来自布局之外的干扰源，开发者工具里很难一眼看出。
-
body默认有margin: 8px→ 左右各 8px = 16px 溢出，直接触发滚动条 -
html是 iOS Safari 的根滚动容器，body { overflow-x: hidden }完全无效，得写html { overflow-x: hidden } -
width: 100vw包含滚动条宽度（Windows 下约 17px），实际比可视区宽；改用100%或100dvw - 嵌套 Flex/Grid：父容器
display: grid，子项又display: flex，两者默认都带min-width: auto，叠加后内容一路顶出去
真正难调试的不是哪行 CSS 写错了，而是多个“合理默认值”在特定组合下共同越界——比如 body margin + img 缺 max-width + grid-auto-columns 用固定像素，三者合力刚好超 1px。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
