Grid容器默认不支持双向滚动，需让子项撑宽容器产生真实溢出，删父容器width限制、用auto-fill/minmax控制列宽、禁用user-select、处理touchmove边界及兼容横屏viewport变化。
Grid容器默认不支持双向滚动，必须手动打破“内容宽度=视口宽度”的假象，否则scrollLeft始终为0，水平滚动形同虚设。
为什么overflow: auto在Grid里常失效
根本不是CSS写错了，而是浏览器判定逻辑：只有当容器的内容总宽 > 容器自身渲染宽度时，才激活水平滚动。而很多人给.grid-container加width: 100vw，再让子项用calc(100vw / 6)等比例缩放——结果总宽≈100vw，没有溢出，scrollLeft读出来永远是0。
常见错误现象：
- 鼠标滚轮能上下滚，但拖拽或
scrollTo({ left: 100 })完全没反应 - 开发者工具里看到
element.scrollWidth≈element.clientWidth - 加了
overflow-x: scroll，但滚动条根本不出现
关键改法：子项控宽，父容器放任自流
把宽度计算逻辑从父容器挪到子项上，让子项自己决定单列物理宽度（比如280px或minmax(250px, 1fr)），这样Grid容器会自然被撑宽，产生真实溢出。
实操建议：
- 删掉
.grid-container上的width、max-width等限制 - 用
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))替代固定列数 - 子项不设
width，靠Grid轨道分配空间；若需固定尺寸，直接设min-width: 280px - 确保
height和grid-template-rows有明确值（如100vh），否则垂直滚动也可能失效
拖拽滚动必须配user-select: none和scroll-behavior: smooth
仅靠CSS不够，JavaScript拖拽要避免文字选中干扰，并提升手感。
容易踩的坑：
- 没禁用
user-select，拖拽时意外触发文本高亮，mousemove事件中断 - 用
scrollLeft += delta硬算，未做边界判断（scrollLeft不能小于0，也不能大于scrollWidth - clientWidth） - 在
touchmove里忘记preventDefault()，导致页面整体偏移 - 混用
scrollTo和直接赋值scrollLeft，后者不触发scroll事件，影响监听逻辑
大屏适配要防100vw在横屏下“缩水”
移动端横屏时100vw其实是屏幕高度（因viewport旋转），用它算列宽会导致列数暴增、单列过窄甚至换行错乱。
更稳的做法：
- 用
aspect-ratio媒体查询代替max-width：@media (min-aspect-ratio: 1/1) { /* 竖屏逻辑 */ } - 子项宽度改用
minmax(300px, 1fr)+auto-fit，由容器宽度自动调节列数 - 避免在
grid-template-columns里出现100vw或calc(100vw / N)这类动态计算
真正麻烦的从来不是写几行grid，而是让滚动在各种设备旋转、缩放、嵌套iframe场景下都保持稳定——这需要你亲手测过真机横竖屏切换、Chrome DevTools的device toggle、以及微信内置浏览器的viewport bug。这些细节不落地，再漂亮的Grid布局也扛不住上线后的第一波用户反馈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
