CSS Scroll snapping with two rows?

Question

CSS Scroll snapping with two rows?

480 Views Asked by sirnightowl At 18 April 2025 at 20:24

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 */

Original Q&A

There are 1 best solutions below

**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;
}

<div class="container">

  <div class="game-feed scrollsnap-container">

    <div class="card game-card scrollsnap-section">
      <img src='https://images.unsplash.com/photo-1620143142765-73a54bb44e58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTc2MTA1NQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
      <div class="card-body">
        <h2>Chess</h2>
      </div>
    </div>

    <div class="card game-card scrollsnap-section">
      <img src='https://images.unsplash.com/photo-1620143142765-73a54bb44e58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTc2MTA1NQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
      <div class="card-body">
        <h2>Chess</h2>
      </div>
    </div>
    <div class="card game-card scrollsnap-section">
      <img src='https://images.unsplash.com/photo-1620143142765-73a54bb44e58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTc2MTA1NQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
      <div class="card-body">
        <h2>Chess</h2>
      </div>
    </div>

    <div class="card game-card scrollsnap-section">
      <img src='https://images.unsplash.com/photo-1620143142765-73a54bb44e58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTc2MTA1NQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
      <div class="card-body">
        <h2>Chess</h2>
      </div>
    </div>
    <div class="card game-card scrollsnap-section">
      <img src='https://images.unsplash.com/photo-1620143142765-73a54bb44e58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTc2MTA1NQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
      <div class="card-body">
        <h2>Chess</h2>
      </div>
    </div>

    <div class="card game-card scrollsnap-section">
      <img src='https://images.unsplash.com/photo-1620143142765-73a54bb44e58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTc2MTA1NQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
      <div class="card-body">
        <h2>Chess</h2>
      </div>
    </div>
    <div class="card game-card scrollsnap-section">
      <img src='https://images.unsplash.com/photo-1620143142765-73a54bb44e58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTc2MTA1NQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
      <div class="card-body">
        <h2>Chess</h2>
      </div>
    </div>

    <div class="card game-card scrollsnap-section">
      <img src='https://images.unsplash.com/photo-1620143142765-73a54bb44e58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTc2MTA1NQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
      <div class="card-body">
        <h2>Chess</h2>
      </div>
    </div>
    <div class="card game-card scrollsnap-section">
      <img src='https://images.unsplash.com/photo-1620143142765-73a54bb44e58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTc2MTA1NQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
      <div class="card-body">
        <h2>Chess</h2>
      </div>
    </div>

    <div class="card game-card scrollsnap-section">
      <img src='https://images.unsplash.com/photo-1620143142765-73a54bb44e58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTc2MTA1NQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
      <div class="card-body">
        <h2>Chess</h2>
      </div>
    </div>
    <div class="card game-card scrollsnap-section">
      <img src='https://images.unsplash.com/photo-1620143142765-73a54bb44e58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTc2MTA1NQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
      <div class="card-body">
        <h2>Chess</h2>
      </div>
    </div>

    <div class="card game-card scrollsnap-section">
      <img src='https://images.unsplash.com/photo-1620143142765-73a54bb44e58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTc2MTA1NQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
      <div class="card-body">
        <h2>Chess</h2>
      </div>
    </div>
    <div class="card game-card scrollsnap-section">
      <img src='https://images.unsplash.com/photo-1620143142765-73a54bb44e58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTc2MTA1NQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
      <div class="card-body">
        <h2>Chess</h2>
      </div>
    </div>

    <div class="card game-card scrollsnap-section">
      <img src='https://images.unsplash.com/photo-1620143142765-73a54bb44e58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTc2MTA1NQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
      <div class="card-body">
        <h2>Chess</h2>
      </div>
    </div>

    <div class="card game-card scrollsnap-section">
      <img src='https://images.unsplash.com/photo-1620143142765-73a54bb44e58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTc2MTA1NQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
      <div class="card-body">
        <h2>Chess</h2>
      </div>
    </div>

    <div class="card game-card scrollsnap-section">
      <img src='https://images.unsplash.com/photo-1620143142765-73a54bb44e58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTc2MTA1NQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
      <div class="card-body">
        <h2>Chess</h2>
      </div>
    </div>

    <div class="card game-card scrollsnap-section">
      <img src='https://images.unsplash.com/photo-1620143142765-73a54bb44e58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTc2MTA1NQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
      <div class="card-body">
        <h2>Chess</h2>
      </div>
    </div>

    <div class="card game-card scrollsnap-section">
      <img src='https://images.unsplash.com/photo-1620143142765-73a54bb44e58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTc2MTA1NQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
      <div class="card-body">
        <h2>Chess</h2>
      </div>
    </div>

    <div class="card game-card scrollsnap-section">
      <img src='https://images.unsplash.com/photo-1620143142765-73a54bb44e58?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMTc2MTA1NQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
      <div class="card-body">
        <h2>Chess</h2>
      </div>
    </div>

  </div>

</div>

CSS Scroll snapping with two rows?

There are 1 best solutions below

Related Questions in CSS

Related Questions in SCROLL-SNAP

Trending Questions

Popular # Hahtags

Popular Questions