加了 grid-auto-flow: column 仍竖排，是因为未显式设置 grid-auto-rows（如 max-content），导致隐式行塌陷；必须配合 grid-auto-columns 和 overflow-x: auto 才能实现真正横向滚动。
只写 grid-auto-flow: column 不会触发横向滚动，真正起作用的是三者协同：grid-auto-flow: column + grid-auto-columns + overflow-x: auto。
为什么加了 grid-auto-flow: column 还是竖着排？
Grid 默认仍会为所有项生成隐式行轨道（grid-auto-rows），哪怕你写了 column，只要没切断“行向下堆叠”的路径，所有子项就全挤在第一行里——看着像横向排列，实则是隐式行高度被设为 auto 后塌陷导致的假象。
- 必须显式设置
grid-auto-rows: max-content或固定值（如100px），否则列填充逻辑被干扰 -
grid-template-rows不能替代它：固定行数会锁死轨道，第 4 个项直接跳到第 4 列第 1 行，而非向右延展 - 如果用了
grid-template-areas，grid-auto-flow对已命名区域内的子项完全失效
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)动态撑开新列 - 响应式最小宽度优先用
minmax(160px, 1fr)，避免小屏下内容被压缩或换行
横向滚动生效的最小必要组合
横向滚动的本质是让容器产生水平溢出，再用 overflow-x: auto 暴露滚动能力。这需要三项配合，缺一不可：
-
grid-auto-flow: column：告诉 Grid “新来的项往右新开一列” -
grid-auto-columns: 100%（或minmax(200px, 1fr)）：定义每列宽度，决定总宽度是否超限 -
overflow-x: auto：启用横向滚动；建议用auto而非scroll，避免空滚动条 - 可选但推荐：
-webkit-overflow-scrolling: touch（iOS 平滑滚动）、scroll-behavior: smooth
移动端容易漏掉的细节
父容器若处于 flex 或无宽度约束上下文中，100% 计算会失准；同时原生滚动条在 Firefox 和 Safari 中表现不一。
- 确保外层容器有明确宽度上下文：比如加
width: 100vw或包裹在container类中 - Firefox 需要
scrollbar-width: none，Safari/Chrome 需::-webkit-scrollbar { display: none } - 如果子项含图片或文本，建议统一设
min-width: 0或white-space: nowrap，防止内容撑破列宽 - 不要对
.row类（如 Bootstrap）单独设overflow：它是 flex 容器，加了也无效，得在外层.col加overflow-hidden
真正卡住的点往往不在 grid-auto-flow 本身，而在隐式轨道控制和宽度计算链路是否闭环——尤其是 grid-auto-rows 和 grid-auto-columns 是否同时声明、父容器是否意外截断内容宽度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
