CSS Scroll snapping with two rows?

Question

I've got a successful scroll snapping with CSS working, but hoping and wondering if I can achieve the same effect of horizontal scroll snapping but with 2 rows of cards? (See section 2 of the CodePen)

Scroll Snap codepen

display: flex;
flex-wrap: nowrap;
scroll-snap-type: mandatory; /* for older browsers */
scroll-snap-points-x: repeat(285px); /* for older browsers */

doğukan · Accepted Answer

Can be done with grid like below

.scrollsnap-container {
  padding: 20px 0px;
  padding-left: 20px;
  position: relative;
  overflow-x: auto;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  gap: 20px;
  scroll-snap-type: mandatory;
  /* for older browsers */
  scroll-snap-points-x: repeat(285px);
  /* for older browsers */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.scrollsnap-section {
  scroll-snap-align: start;
}

.container {
  max-width: 1300px;
  margin: 0 auto;
}

.game-card {
  margin-left: 5px;
  width: 285px;
  border: 2px solid transparent;
  background: #1A2028;
  color: #fff;
  border-radius: 20px;
  overflow: hidden;
}

.game-card a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.game-card .card-body {
  text-align: center;
}

.game-card:hover {
  border: 2px solid #BD198D;
}

CSS Scroll snapping with two rows?

Answers (1)

Related Questions