用 css grid 实现多列轮播图最直接，需设置 display: grid、grid-auto-flow: column、grid-template-columns、overflow-x: auto、scroll-snap-type: x mandatory 及每个卡片 scroll-snap-align: start。
轮播图用 CSS Grid 做多列布局最直接
纯 HTML + CSS 实现多列轮播图，display: grid 是目前最可控的方式。它天然支持“每行显示 N 个卡片”，且能配合 scroll-snap-type 做平滑分页滚动，不需要 JS 就能完成基础多列轮播逻辑。
- 避免用
float或inline-block：响应式错位、间隙难控、无法精准对齐视口 - 别一上来就写 JS 轮播：多数场景只需横向滚动 + 分页吸附，CSS 已足够
- 列数由
grid-template-columns控制，比如repeat(3, 1fr)表示每屏显示 3 列 - 必须给容器加
scroll-snap-type: x mandatory，否则滚动不会自动停在每组起始位置
HTML 结构要扁平，别嵌套多余 wrapper
多列轮播的核心是让「每组 N 个子项」作为一个视觉单元对齐视口。如果结构嵌套过深（比如每个卡片再包一层 div），scroll-snap-align 容易失效或吸附不准。
推荐结构：外层 div 为滚动容器，直系子元素即为卡片，不额外包裹。
<div class="carousel"> <div class="card">@@##@@</div> <div class="card">@@##@@</div> <div class="card">@@##@@</div> <div class="card">@@##@@</div> <div class="card">@@##@@</div> <div class="card">@@##@@</div> </div>
关键 CSS 必须写全，漏一项就滚动不对齐
以下几条 CSS 缺一不可，尤其注意单位和值的组合：
立即学习“前端免费学习笔记（深入）”；
-
overflow-x: auto：启用横向滚动（不是scroll，否则 iOS 不触发 snap） -
scroll-snap-type: x mandatory：强制吸附，mandatory比proximity更可靠 -
grid-auto-flow: column：让 Grid 子项按列顺序铺开（关键！否则默认按行） - 每个
.card必须设scroll-snap-align: start，且宽度需与视口内单组宽度一致（如 3 列，每张卡占 1/3 宽）
.carousel {
display: grid;
grid-auto-flow: column;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.card {
scroll-snap-align: start;
min-width: 300px; /* 防止被压缩过小 */
flex: 0 0 calc(33.333% - 0.666rem); /* 若不用 Grid，可用此替代，但 Grid 更稳 */
}移动端滑动卡顿？检查 -webkit-overflow-scrolling 和 overscroll-behavior
iOS Safari 对 scroll-snap 支持较晚，旧版需加兼容前缀；安卓部分浏览器会因 overscroll 弹跳干扰吸附效果。
- 加
-webkit-overflow-scrolling: touch提升 iOS 滚动流畅度（仅 Safari 有效） - 加
overscroll-behavior-x: contain防止滚到头时触发页面回弹，影响 snap 精度 - 不要用
touch-action: pan-y锁定方向：它会同时禁掉横向滚动，导致轮播失效 - 真机测试时，优先看 Safari 和 Chrome Android，Firefox 移动端对 scroll-snap 支持仍不稳定
滚动吸附是否生效，最简单的验证方式是：手指慢速拖动，松手后是否自动停在某张卡的左边缘。如果停在中间、或者直接滚到底，大概率是 scroll-snap-align 没生效，或父容器没设 scroll-snap-type。
