每100vw捕捉CSS网格滚动

Question

我正在尝试在CSS网格上进行滚动捕捉，但是我没有运气。我想做的是每100vw滚动滚动并重复一次，我试图添加scroll-snap-align：start;到第20个项目，但滚动捕捉根本不起作用，如何使滚动捕捉在CSS网格上工作。

codepen

  .grid {
  padding: var(--gutter);
  display: inline-grid;
  grid-gap: calc(var(--gutter) * 1.45);
  grid-auto-flow: column;

  grid-template-columns: repeat(auto-fill, 1fr);
  grid-template-rows: repeat(auto-fill, minmax(70px, 1fr));
  height: calc(100vh - 110px);
  z-index: 2;
  position: relative;

  scroll-snap-type: x mandatory;

  scroll-snap-points-x: repeat(100vw);
}

.grid__item {
  background: mix(white, black, 95%);
  border-radius: var(--radius);
  transition: scale .5s ease;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  scroll-snap-align: start;
}