如何使用 CSS Grid 实现卡片堆叠布局-JavaScript中文网-JavaScript教程资源分享门户

什么是卡片堆叠布局

卡片堆叠布局是一种常见的 UI 设计方式，通常用于轮播图、新闻列表等场景中。它的主要特点是一次只显示一张卡片，以层叠的方式展示。当用户进行操作（如翻页）时，当前卡片消失，下一张卡片出现。

为何使用 CSS Grid 实现卡片堆叠布局

CSS Grid 是一种强大的布局方式，能够与传统的 flex 布局相比，更加灵活、精确地控制布局。使用 CSS Grid 实现卡片堆叠布局，既能充分利用网格布局为卡片提供准确的位置，也能方便地控制新卡片的出现与消失。

实现卡片堆叠布局，我们需要先定义一个网格容器，再在其内部定义多个网格项（即卡片）。然后，通过设置网格项的位置和显示方式，实现卡片的层叠和隐藏。

定义网格容器

我们可以使用 grid-template-columns 和 grid-template-rows 属性来定义网格容器的列数和行数，以及每个网格项的大小。例如，下面的代码定义了一个两行两列的网格容器：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

定义网格项

在网格容器内部，我们可以使用 grid-column 和 grid-row 属性来设置每个网格项的位置。例如，下面的代码定义了四个网格项的位置：

// javascriptcn.com 代码示例
.card1 {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}

.card2 {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}

.card3 {
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
}

.card4 {
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
}

控制卡片的层叠和隐藏

卡片堆叠布局的核心是控制卡片的层叠和隐藏。我们可以使用 z-index 属性来控制卡片的层叠先后顺序，例如：

.card2 {
  z-index: 1;
}

.card1 {
  z-index: 2;
}

上面的代码将卡片 2 放在卡片 1 下面，实现了层叠的效果。

要实现卡片的隐藏，我们可以在网格容器中使用 grid-template-areas 属性，定义每个网格项在网格中的位置，并将需要隐藏的卡片的位置设置为一个空字符串。例如，下面的代码将卡片 1 隐藏：

// javascriptcn.com 代码示例
.container {
  grid-template-areas:
    "card2 card2"
    " . card3";
}

.card1 {
  grid-area: unset;
}

实现卡片的滚动

卡片堆叠布局通常需要实现卡片的滚动效果。我们可以通过添加一个滚动容器，并改变其 transform 属性的值来实现卡片的滚动。例如，下面的代码实现了卡片的向左滚动：

// javascriptcn.com 代码示例
.scroller {
  width: 100%;
  height: 100%;
  overflow-x: auto;
}

.card {
  transition: all 0.3s ease;
}

.scroller:hover .card {
  transform: translateX(-10px);
}

示范代码

下面是一个完整的卡片堆叠布局的示例代码：

// javascriptcn.com 代码示例
<div class="scroller">
  <div class="container">
    <div class="card card1">
      <h2>Card 1</h2>
    </div>
    <div class="card card2">
      <h2>Card 2</h2>
    </div>
    <div class="card card3">
      <h2>Card 3</h2>
    </div>
    <div class="card card4">
      <h2>Card 4</h2>
    </div>
  </div>
</div>

<style>
  .scroller {
    width: 100%;
    height: 100%;
    overflow-x: auto;
  }

  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
      "card1 card2"
      "card3 card4";
    row-gap: 10px;
    column-gap: 10px;
  }

  .card {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    padding: 30px;
    transition: transform 0.3s ease, z-index 0s;
  }

  .card1 {
    grid-area: card1;
    z-index: 2;
  }

  .card2 {
    grid-area: card2;
    z-index: 1;
  }

  .card3 {
    grid-area: card3;
    z-index: 1;
  }

  .card4 {
    grid-area: card4;
    z-index: 1;
  }

  .scroller:hover .card {
    transform: translateX(-10px);
  }
</style>

总结

使用 CSS Grid 实现卡片堆叠布局是一种简单、灵活、高效的方式。在实现过程中，我们需要定义网格容器并设定网格项的位置，然后通过控制 z-index 和网格区域的方式实现卡片的层叠和隐藏。最后，我们添加滚动容器并改变其 transform 属性的值，实现卡片的滚动效果。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6533fcc87d4982a6eb7c96c3