Scroll cards vertically and horizontally

by lcdavid94

HTML

<div class="vertical-feed">
  <!-- Carousel 1 -->
  <section class="feed-section">
    <h2 class="section-title">Trending Now</h2>
    <div class="horizontal-carousel">
      <div class="card card-red">Movie 1</div>
      <div class="card card-red">Movie 2</div>
      <div class="card card-red">Movie 3</div>
    </div>
  </section>

  <!-- Carousel 2 -->
  <section class="feed-section">
    <h2 class="section-title">Continue Watching</h2>
    <div class="horizontal-carousel">
      <div class="card card-blue">Show A</div>
      <div class="card card-blue">Show B</div>
      <div class="card card-blue">Show C</div>
    </div>
  </section>

  <!-- Carousel 3 -->
  <section class="feed-section">
    <h2 class="section-title">Recommended For You</h2>
    <div class="horizontal-carousel">
      <div class="card card-green">Item X</div>
      <div class="card card-green">Item Y</div>
      <div class="card card-green">Item Z</div>
    </div>
  </section>
</div>

CSS

.vertical-feed {
  width: 420px;
  height: 360px;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  background-color: #1a202c;
  border: 2px solid #4a5568;
  border-radius: 8px;
}

.feed-section {
  padding: 16px;
  box-sizing: border-box;
}

.section-title {
  color: #e2e8f0;
  font-size: 16px;
  margin: 0 0 8px 0;
}

.horizontal-carousel {
  width: 388px;
  height: 220px;
  display: flex;
  gap: 16px;
  box-sizing: border-box;

  /* Single-axis horizontal scroll container */
  overflow-x: auto;
  overflow-y: clip;
  scroll-snap-type: x mandatory;
}

.card {
  flex: 0 0 280px;
  height: 200px;
  border-radius: 8px;
  color: #ffffff;
  font-weight: bold;
  padding: 16px;
  box-sizing: border-box;

  /* Snaps X horizontally in carousel, and Y vertically in vertical-feed */
  scroll-snap-align: start start;
}

.card-red   { background-color: #e53e3e; }
.card-blue  { background-color: #3182ce; }
.card-green { background-color: #38a169; }