只设grid-auto-flow: column无法实现横向滑动，根本原因是未配合grid-auto-columns定义列宽且未设置overflow-x: auto；grid默认仍生成隐式行轨道，导致项挤在第一行横排，而非向右新增列并触发水平溢出。
为什么只设 grid-auto-flow: column 无法实现横向滑动
加了 grid-auto-flow: column 却还是竖着排、不横向滚动？根本原因不是属性写错了，而是你没切断“默认行流”的生成路径。Grid 默认会为所有自动放置项创建隐式行轨道（grid-auto-rows），而列方向填充的前提是：容器必须允许“列无限向右延展”，同时阻止“行向下堆叠”。只设 grid-auto-flow: column，浏览器仍按常规逻辑分配行高（比如默认 auto），结果就是所有项挤在第一行里从左到右铺开——看起来像 flex row，实际是 Grid 的隐式行在作祟。
- 必须显式设置
grid-auto-rows: max-content或固定值（如100px），否则隐式行高度不可控，列填充逻辑被干扰 - 不能依赖
grid-template-rows固定行数，它会锁死行轨道，导致第 4 个项直接跳到第 4 列第 1 行，而非“往下堆” - 如果同时用了
grid-template-areas，grid-auto-flow对已命名区域的子项完全失效
真正触发横向滑动的最小必要组合
横向滑动的本质是：让 Grid 容器产生水平溢出，再用 overflow-x: auto 暴露滚动条。这需要两项协同：grid-auto-flow: column 控制新增项往右插，grid-auto-columns 定义每列宽度——二者缺一不可。
-
grid-auto-flow: column：告诉 Grid “新来的项往右新开一列” -
grid-auto-columns: minmax(200px, 1fr)：定义每一列的宽度规则（最小 200px，有空间就均分） -
overflow-x: auto+white-space: nowrap（可选）：确保容器不换行、允许横向滚动 - 别漏掉
scrollbar-width: none（Firefox）或-webkit-scrollbar隐藏样式，否则原生滚动条破坏 UI
grid-auto-columns 和 grid-template-columns 到底该用谁
初学者常混淆这两个属性的作用域：grid-template-columns 只管“显式声明的列”，而横向滑动列表几乎全是动态插入项，它们不会落在显式列里，而是进入“隐式列轨道”——这时起作用的是 grid-auto-columns。
- 写
grid-template-columns: repeat(3, 1fr)是无效的：它只建 3 列，第 4 个项会被塞进第 4 列（隐式），但该列宽度由grid-auto-columns决定，不是1fr - 正确做法是彻底不写
grid-template-columns，只靠grid-auto-columns动态撑开新列 - 若需响应式最小宽度，用
minmax(160px, 1fr)而非200px，避免小屏下内容被压缩或换行
移动端真机上滚动卡顿或失效的常见原因
开发时在桌面 Chrome 看着正常，一上 iOS Safari 或安卓 WebView 就卡住、点不动、甚至不触发滚动？问题往往不在 Grid 属性本身，而在滚动容器的渲染上下文。
- 父容器没设
width或max-width，导致 Grid 计算列宽时取到auto，隐式列无限宽，滚动失效 - 没加
-webkit-overflow-scrolling: touch（iOS 旧版 Safari 必须） - 子项设置了
white-space: nowrap但父容器未设display: block，部分安卓 WebView 会忽略 overflow - 滚动容器内有
transform或will-change，可能触发合成层异常，临时移除验证是否恢复
横向滑动列表最脆弱的环节，从来不是 grid-auto-flow 的写法，而是隐式轨道的尺寸控制和滚动上下文的兼容性处理。哪怕 column 写对了，grid-auto-columns 漏掉或者 overflow-x 被父级 hidden 截断，整个逻辑就崩了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
