只用 grid-auto-flow: column 不足以实现横向滚动，必须搭配 grid-auto-columns 定义列宽、overflow-x: auto 触发滚动，并设置 grid-auto-rows: max-content 防止隐式行干扰；否则所有项挤在第一行，无法向右延展产生水平溢出。
直接说结论：只用 grid-auto-flow: column 是不够的，必须搭配 grid-auto-columns 和 overflow-x: auto 才能真正触发横向滚动；否则卡片会全部挤在第一行，看起来像 Flex 布局，实际是 Grid 的隐式行在捣鬼。
为什么加了 grid-auto-flow: column 还不滚动？
根本问题在于浏览器仍按默认逻辑生成隐式行轨道（grid-auto-rows），导致所有卡片被塞进同一行，容器没产生水平溢出。滚动的前提是“内容宽度超过容器”，而仅设列流向却不控列宽、不限制行高，Grid 就不会向右新建列。
- 必须显式声明
grid-auto-rows: max-content或固定值（如120px），否则隐式行高度不可预测，干扰列填充 -
grid-template-rows不能替代它——写死 3 行只会让第 4 个卡片掉到第 4 列第 1 行，而非继续向右延展 - 检查是否误加了
white-space: nowrap在容器上（这是文本滚动需要的，但对 Grid 卡片栏反而可能撑宽容器、掩盖溢出）
grid-auto-columns 和 grid-template-columns 到底用哪个？
动态插入的卡片走的是“隐式列轨道”，所以起效的是 grid-auto-columns，不是 grid-template-columns。后者只管你手动定义的列，对新增项无效。
- 错误写法：
grid-template-columns: repeat(3, 1fr)—— 它只建 3 列，第 4 个卡片虽进入隐式列，但宽度由grid-auto-columns决定，不是 1fr - 推荐写法：
grid-auto-columns: minmax(280px, 1fr)—— 最小宽度保文字可读、图标可点，大屏时均分剩余空间 - 如果卡片高度差异大，加
align-items: start避免整行被最高卡片拉伸（默认stretch会强制等高）
如何让滚动更顺滑且隐藏原生滚动条？
横向滚动卡顿或丑陋滚动条，通常是因为缺少基础样式控制和硬件加速缺失。
立即学习“前端免费学习笔记（深入）”；
- 容器必须设
overflow-x: auto和scrollbar-width: none（Firefox） - 加
-webkit-scrollbar { display: none }隐藏 Chrome/Safari 滚动条 - 给卡片加
transform: translateZ(0)或will-change: transform触发 GPU 加速（尤其在 iOS 上明显） - 避免在滚动容器上设
padding，改用内部 wrapper 元素包裹卡片，防止 padding 参与滚动宽度计算
最易被忽略的一点：滚动容器的父级如果有 display: flex 且未设 min-width: 0，在某些安卓 WebView 下会导致子容器 overflow-x 失效——这不是 Grid 问题，而是 Flex 的收缩行为干扰了滚动上下文。
