grid本身是静态布局系统，grid-template-columns仅定义列数与尺寸，不具备位移或动画能力；实现无限循环需依赖@keyframes+transform: translatex()驱动重复内容的精确位移，配合overflow: hidden和显式尺寸计算确保无缝衔接。
为什么直接用 grid-template-columns 做不了无限循环
Grid 本身是静态布局系统，grid-template-columns 只定义列数和尺寸，不提供位移或动画能力。你写 repeat(5, 1fr)，浏览器就真只画 5 列；想“滚到第 6 列”，它根本不存在——没有 DOM、没有坐标、没有下一帧。所谓“首尾相连”，本质是让视觉上第 5 列滑出后，立刻看到和第 1 列一模一样的内容，这必须靠重复渲染 + 精确位移来骗过眼睛。
@keyframes + transform: translateX() 是唯一可行路径
Grid 容器只负责排列，真正的滚动动作得交给子元素的 CSS 动画。关键点有三个：
- 把所有轮播项（比如 5 张图）复制一份，拼成 10 项，放进一个
.slider-inner容器里，这个容器用display: grid排列 -
.slider-inner的总宽度必须严格等于单组宽度 × 2，例如每项宽300px、间隙20px，5 项就是calc(300px * 5 + 20px * 4) = 1580px，那双组宽就得是3160px - 动画用
@keyframes控制transform: translateX()，从0移动到-1580px（即单组宽度），而不是-100%——百分比在 Grid 中会按父容器算，而父容器（如.slider）往往只是视口宽，完全不匹配内容真实尺寸
容易被忽略的两个断层点：gap 和 overflow
很多人卡在“最后一张闪一下才接上第一张”，问题通常出在这两处：
-
gap不参与动画位移计算：Grid 的gap是布局间隔，不是元素自身的一部分。当你移动translateX(-1580px)，实际位移终点是第 5 项右边缘，但第 6 项（即复制的第 1 项）左边缘还隔着一个gap，导致露出空白。解法是把gap拆进每个项的margin-right，或者直接在width计算里显式加上 -
overflow: hidden必须加在 Grid 父容器上，而不是.slider-inner：如果错加在内部，浏览器可能仍渲染溢出部分并触发滚动条，破坏“无缝”假象；正确位置是包裹.slider-inner的外层容器，且需设固定宽高
响应式下怎么保持循环不崩
Grid 的 minmax() 或 auto-fit 会让列数动态变化，但这和无限滚动冲突——动画位移距离是按“固定列数”算的。所以必须切断响应式对动画逻辑的干扰：
- 轮播项数量锁定：用
grid-template-columns: repeat(5, minmax(0, 1fr))这类写法不可取，改用固定像素值或flex替代 Grid 做内层排列（外层仍可用 Grid 做布局容器） - 媒体查询只调样式，不动动画参数：在
@media (max-width: 768px)里重设font-size、gap、单个项宽，但@keyframes中的translateX()数值也得同步更新，不能只靠缩放 - 移动端慎用
scroll-snap-type：它和 CSS 动画共存时容易抢夺滚动控制权，导致自动轮播卡顿或跳帧
真正难的不是写几行 @keyframes，而是让每一处尺寸、间隙、位移都严丝合缝地对齐——差 1px，循环就露馅；差 1ms，动画就抖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
