根本原因是未设grid-auto-columns和overflow-x:auto：grid-auto-flow:column仅控制填空方向，需配合grid-auto-columns定义列宽（如100%或minmax(160px,1fr)）并启用overflow-x:auto才能触发横向滚动，动态项走隐式列轨道，故应弃用grid-template-columns。
只写 grid-auto-flow: column 为什么卡片还是横排不滚动？
根本原因是 Grid 默认仍会生成隐式行轨道，所有子项被塞进第一行里从左到右铺开，看起来像 Flex row，但实际是 Grid 在用默认的 grid-auto-rows: auto 撑高了那一行——容器没溢出，overflow-x 就没触发。
必须同时切断“行向下堆叠”和“列无宽度”的两个默认行为：
-
grid-auto-flow: column告诉 Grid 新项往右新开一列 -
grid-auto-columns: 100%或minmax(100%, 1fr)给每一列明确宽度（否则列宽为auto，内容多宽就多宽） -
overflow-x: auto才能暴露滚动能力；用scroll会在无内容溢出时也显示空滚动条
grid-template-columns 和 grid-auto-columns 到底该用哪个？
横向滑动列表几乎全是动态插入项（比如 JS append 的 <section></section>），它们不会落在你手写的 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) 而非固定值，避免小屏下内容被压缩。
移动端滚动体验差？别漏掉这三个关键样式
iOS 和 Android 对原生滚动的支持差异大，光有 overflow-x: auto 不够：
-
-webkit-overflow-scrolling: touch：iOS 必加，否则滚动卡顿、惯性消失 -
scroll-snap-type: x mandatory+scroll-snap-align: start：让每次滚动停在整屏边界，避免“卡在中间” -
scroll-behavior: smooth：触发声控或 JSscrollIntoView时才有用，纯手势滑动无效
注意：scroll-snap-align 必须写在子项上（如 section），不是容器上。
为什么卡片高度塌陷或错位？
Grid 容器里子项若没设高度，grid-auto-rows: auto 会让行高收缩到内容高度，导致视觉错位或滚动区高度异常。
解决方式很简单，但容易被忽略：
- 给子项设明确
height（如height: 120px），或用min-height配合内容自适应 - 加
min-width: 100%到子项上，防止 Grid 在某些 UA 下把列宽算成内容宽度而非容器宽度 - 避免在子项上写
width或flex相关声明（如flex-shrink: 0在 Grid 中非必需，但加了也无害）
真正麻烦的是 scroll-snap 和 overflow 共同作用时，若子项高度不一致，snap 会失效——所以“一屏一卡”场景下，高度统一是最省事的底线。
