grid布局两行或多行样式

最新推荐文章于 2024-04-22 17:46:42 发布

junyu1024

最新推荐文章于 2024-04-22 17:46:42 发布

阅读量765

点赞数

分类专栏：炒鸡酷炫文章标签： html 前端 css

本文链接：https://blog.csdn.net/junyu1024/article/details/126041910

版权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
  .scrollsnap-container {
    padding: 20px 0px;
    padding-left: 20px;
    position: relative;
    overflow-x: auto;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: auto auto;
    /* grid-template-rows: repeat(4, 1fr); */
    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;
  }

  .game-card {
    margin-left: 50px;
    width: 285px;
    border: 50px solid transparent;
    background: #1A2028;
    border-radius: 20px;
    overflow: hidden;
  }
  </style>
</head>

<body>
    <div class="scrollsnap-container">
      <div class="game-card">
        <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>
      <div class="game-card">
        <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=