css grid 是实现多行多列轮播最可控的纯 css 方案，需用 grid-template-rows/columns 固定行列尺寸、scroll-snap-type: both mandatory 启用二维吸附、每卡片设 scroll-snap-align: start start，且 js 滚动须用 scrollto 并重置定时器。
用 CSS Grid 做多行多列轮播最可控
纯 CSS 实现多行多列轮播，display: grid 是目前最稳定、语义最清晰的方案。它天然支持二维布局（行 × 列），不像 flex 只能一维展开，也不依赖 JS 模拟“行”概念。
关键不是“让轮播动起来”，而是“让每屏刚好显示 N 行 × M 列，并吸附对齐”。这靠三组属性协同：grid-template-rows 和 grid-template-columns 定义行列数，scroll-snap-type: both mandatory 启用双向吸附，容器必须设 overflow: auto 且禁用 overscroll-behavior 防止滚动穿透。
- 每张卡片必须是滚动容器的**直系子元素**，不能套 wrapper —— 否则
scroll-snap-align在多维下极易失效 -
grid-auto-flow: dense可选，但慎用：它会重排顺序，可能打乱视觉流 - 移动端需加
-webkit-overflow-scrolling: touch保滑动惯性（iOS Safari 旧版）
scroll-snap-align 必须设为 start start
多行多列下，scroll-snap-align: start 单值写法只作用于行轴（x），列轴（y）默认是 none，结果就是横向能吸附、纵向一滑到底。要真正实现“每屏停住一个 N×M 单元”，必须显式写双值：scroll-snap-align: start start。
这个细节在 MDN 文档里藏得深，但实测中 90% 的“吸附失效”都卡在这儿。别信“浏览器自动推断”，它不推断二维。
- 容器上设
scroll-snap-type: x mandatory→ 只管横向 - 容器上设
scroll-snap-type: y mandatory→ 只管纵向 - 容器上设
scroll-snap-type: both mandatory→ 才真正启用二维吸附 - 每个卡片必须同时满足
scroll-snap-align: start start，否则某一行或某一列会“漏吸”
grid-template-rows/cols 不要用 fr 单位做固定行列数
想严格显示 2 行 × 3 列？别写 grid-template-rows: repeat(2, 1fr) + grid-template-columns: repeat(3, 1fr)。因为 1fr 是按剩余空间分配，当内容高度不一致（比如图片宽高比不同），行高会被撑开，导致“2 行”实际变成 3 行或 1.5 行，吸附位置就偏了。
正确做法是用固定单位（px、rem）或 minmax() 锁死单格尺寸：
-
grid-template-rows: repeat(2, minmax(200px, 1fr))→ 至少 200px，超了才均分 -
grid-template-columns: repeat(3, 280px)→ 每列死定 280px，横向滚动由容器宽度裁切 - 所有卡片统一设
height: 200px或aspect-ratio: 4/3，避免高度塌陷影响行数
JS 干预极少，但 hover 暂停必须手动接管
CSS Grid 轮播本身无自动播放逻辑，setInterval 控制滚动位置仍是主流方案。但注意：直接改 scrollLeft/scrollTop 会绕过 scroll-snap，导致吸附失效。
安全做法是用 element.scrollTo({ left, top, behavior: 'smooth' })，它尊重 snap 行为。同时必须处理暂停：
- 鼠标移入容器时，
clearInterval(carouselTimer) - 移出时重新
carouselTimer = setInterval(() => el.scrollTo(...), 4000) - 手动点击箭头后，同样要重置定时器，否则会出现“刚滚到第 2 屏，0.5 秒后又跳到第 3 屏”的错帧
- 别用
scrollBy—— 它在 snap 区域内行为不可预测，尤其在 iOS 上容易卡住
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
