css - CSS 滚动与两行对齐？

Question

我已经成功地使用 CSS 进行滚动捕捉，但希望并想知道我是否可以实现与水平滚动捕捉相同的效果但使用 2 行卡片？（参见 CodePen 的第 2 部分）

滚动 Snap 代码笔

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

Answer 1

可以用下面的网格来完成

.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>