什么是卡片堆叠布局
卡片堆叠布局是一种常见的 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 属性来设置每个网格项的位置。例如，下面的代码定义了四个网格项的位置：
-- -------------------- ---- ------- ------ - ------------ - - ---- -- --------- - - ---- -- - ------ - ------------ - - ---- -- --------- - - ---- -- - ------ - ------------ - - ---- -- --------- - - ---- -- - ------ - ------------ - - ---- -- --------- - - ---- -- -
控制卡片的层叠和隐藏
卡片堆叠布局的核心是控制卡片的层叠和隐藏。我们可以使用 z-index 属性来控制卡片的层叠先后顺序，例如：
.card2 {
z-index: 1;
}
.card1 {
z-index: 2;
}上面的代码将卡片 2 放在卡片 1 下面，实现了层叠的效果。
要实现卡片的隐藏，我们可以在网格容器中使用 grid-template-areas 属性，定义每个网格项在网格中的位置，并将需要隐藏的卡片的位置设置为一个空字符串。例如，下面的代码将卡片 1 隐藏：
-- -------------------- ---- -------
---------- -
--------------------
------ ------
- - -------
-
------ -
---------- ------
-实现卡片的滚动
卡片堆叠布局通常需要实现卡片的滚动效果。我们可以通过添加一个滚动容器，并改变其 transform 属性的值来实现卡片的滚动。例如，下面的代码实现了卡片的向左滚动：
-- -------------------- ---- ------- --------- - ------ ----- ------- ----- ----------- ----- - ----- - ----------- --- ---- ----- - --------------- ----- - ---------- ------------------ -
示范代码
下面是一个完整的卡片堆叠布局的示例代码：
-- -------------------- ---- -------
---- -----------------
---- ------------------
---- ----------- -------
-------- ------
------
---- ----------- -------
-------- ------
------
---- ----------- -------
-------- ------
------
---- ----------- -------
-------- ------
------
------
------
-------
--------- -
------ -----
------- -----
----------- -----
-
---------- -
-------- -----
---------------------- --- ----
------------------- --- ----
--------------------
------ ------
------ -------
-------- -----
----------- -----
-
----- -
----------------- -----
-------------- ----
----------- - - ---- ------- -- -- -----
-------- -----
----------- --------- ---- ----- ------- ---
-
------ -
---------- ------
-------- --
-
------ -
---------- ------
-------- --
-
------ -
---------- ------
-------- --
-
------ -
---------- ------
-------- --
-
--------------- ----- -
---------- ------------------
-
--------总结
使用 CSS Grid 实现卡片堆叠布局是一种简单、灵活、高效的方式。在实现过程中，我们需要定义网格容器并设定网格项的位置，然后通过控制 z-index 和网格区域的方式实现卡片的层叠和隐藏。最后，我们添加滚动容器并改变其 transform 属性的值，实现卡片的滚动效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6533fcc87d4982a6eb7c96c3