水平滚动卡片组的正确实现不是用grid-auto-flow: column，而是用grid-template-columns设固定列宽、overflow-x: auto启用滚动，并避免内边距/溢出隐藏干扰。
为什么grid-auto-flow: column不是水平滚动的正确起点
直接设grid-auto-flow: column会让卡片从上到下、一列接一列地堆叠，而不是横向铺开——这反而导致垂直溢出和意外的长页面，根本不会触发水平滚动。真正需要的是让卡片**按行横向排列但不换行**，再配合容器宽度限制和overflow-x: auto来暴露滚动能力。
实现水平滚动卡片组的最小可行配置
核心不是靠grid-auto-flow，而是用显式列轨道 + 固定单卡宽度 + 溢出控制：
-
display: grid启用网格布局 -
grid-template-columns: repeat(10, 280px)——预设足够多列（如10列），每张卡固定宽280px；总宽度远超容器，才能触发横向滚动 -
grid-auto-flow: row（默认值，可省略）确保新卡片按行填充，即从左到右依次排布 -
overflow-x: auto在容器上启用水平滚动条 -
scroll-snap-type: x mandatory（可选）配合scroll-snap-align: start在卡片级实现吸附，但要注意它可能干扰惯性滑动
常见错误：卡片被截断或两端露不全
问题往往出在容器内边距和卡片间距的叠加上：
- 用
gap会在卡片间加空隙，但首尾卡片紧贴容器边缘，导致视觉上“没露出来”——改用padding-inline: 16px给容器左右留白 - 卡片本身设了
width: 100%或flex相关声明，会覆盖 Grid 的轨道分配，必须删掉 - 图片未设
width: 100%; height: auto，撑破卡片高度，间接影响滚动区域计算 - 父容器或卡片设了
overflow: hidden，直接裁掉超出部分，滚动条也不会出现
移动端水平滚动的真实体验陷阱
iOS Safari 对overflow-x: auto的横向滚动支持有限：双指无法触发，只能拖拽，且容易和页面整体滚动冲突。更稳妥的做法是：
- 放弃纯 CSS 滚动，改用
scrollBy()+touchstart/touchmove手动控制位移 - 禁用默认滚动行为：
overscroll-behavior-x: contain防止滚到头时触发父容器滚动 - 避免在滚动容器内嵌套其他可滚动元素（比如卡片里还有
overflow-y: auto的描述区），否则手势识别极易混乱
真正难的不是写对那几行 CSS，而是让滚动在各种设备上都“跟手”且不抢焦点——这往往需要绕开 Grid 的自动布局，转而用更底层的滚动 API 控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
