CSS Grid 是一个十分强大的布局系统，它可以轻松实现各种布局方案，包括信息夹和小卡片的排列布局。本文将为大家介绍如何使用 CSS Grid 实现该布局，同时提供示例代码和实用技巧。
何为信息夹和小卡片布局
信息夹是一种常见的页面布局方式，它通常由两个或更多个栏板组成，每个栏板都可以包含一个或多个小卡片。小卡片是一种轻量级的元素，可以显示不同种类的信息，如图片、文本、视频等。信息夹和小卡片布局通常用于展示商品列表、新闻文章或其他相关信息。
步骤一：创建网格容器
使用 CSS Grid 实现信息夹和小卡片布局需要先创建一个网格容器。我们可以通过设置 display: grid，来把一个父级元素转换为网格容器，从而在其内部创建网格行和列。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}在上面的示例代码中，我们将父级元素的 display 属性设置为 grid，从而将其转换为网格容器。接着，我们使用 grid-template-columns 定义了三列网格，每一列的宽度都是 1fr，即根据可用空间平均分配。最后，我们使用 grid-gap 定义了行列之间的间距为 20px。
步骤二：创建网格项
在网格容器内部，我们可以使用各种网格项来创建信息夹和小卡片。通常情况下，每个网格项都是一个小卡片或一个信息夹。为了实现这种布局方式，我们需要手动创建几个网格项，然后在其内部放入所需的元素。
-- -------------------- ---- -------
---- ------------------
---- -------------
---- ----------------- ------------ -------
-------- ----------
-------- ----- ----- --- ----- ----------- ---------- ----- --- --------- ------- ------ ---- ------- --------
------
---- --------------
---- -------------------
---- ----------------- ------------ -------
--------- ---- ----------
------
---- -------------------
---- ----------------- ------------ -------
--------- ---- ----------
------
---- -------------------
---- ----------------- ------------ -------
--------- ---- ----------
------
------
---- -------------
---- ----------------- ------------ -------
-------- ----------
-------- ----- ----- --- ----- ----------- ---------- ----- --- --------- ------- ------ ---- ------- --------
------
------在上面的示例代码中，我们手动创建了三个网格项，分别为左边的大卡片、中间的信息夹和右边的大卡片。信息夹里面又包含了三个小卡片，它们被垂直排列在一起。
步骤三：布局各个网格项
现在我们已经成功创建了网格容器和网格项，接下来就需要使用 CSS Grid 的各种属性来对它们进行布局了。具体来说，我们需要使用 grid-column-start、grid-column-end、grid-row-start、grid-row-end 和 grid-area 这些属性来控制网格项在网格容器内部的位置。
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- --------- ----- - ----- - ---------- - - - - - - -- - ------ - ---------- - - - - - - -- -------- ----- ------------------- --------- ----- --------- ----- - ----------- - ----------------- -------- -------- ----- -------- ----- --------------- ------- ---------------- -------------- - ------ ------------------------ - ---------- - - - - - - -- - ------ ------------------------ - ---------- - - - - - - -- - ------ ------------------------ - ---------- - - - - - - -- - ---------------- - ---------- - - - - - - -- -
在上面的示例代码中，我们首先给网格容器定义了三列网格，每个网格的宽度都是 1fr。接着，我们使用 grid-area 属性给各个网格项设置了位置。其中，左边的大卡片的位置为第一行第一列，即 1 / 1 / 2 / 2。中间的信息夹的位置为第一行第二列，即 1 / 2 / 2 / 3。右边的大卡片的位置为第一行第三列，即 1 / 3 / 2 / 4。而中间信息夹里的三个小卡片则需要分别设置行列的位置，通过选择器 nth-child 来获取对应的子元素，并设定位置坐标。
为了实现信息夹里的小卡片垂直排列的效果，我们在 .stack 上设置了 display: grid，并定义了三行网格，每个网格的高度都是 1fr。然后，我们使用 grid-area 属性来给各个小卡片设置了位置。值得注意的是，我们在 .small-card 中还为其内部的元素指定了 flex 布局，以便在每个小卡片中对元素进行垂直居中对齐。
步骤四：优化布局效果
现在我们已经成功地使用 CSS Grid 实现了信息夹和小卡片的排列布局了，但是我们还可以进一步优化它们的效果。例如可以使用 transition 属性来让每个小卡片的鼠标经过时出现平滑的动画效果。
.small-card:hover {
transform: translateY(-5px);
box-shadow: 0px 8px 20px rgba(0,0,0,0.1);
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}在示例代码中，我们使用了 transform 属性来将小卡片往上移动 5px，以及 box-shadow 属性来创建一个平滑的阴影效果。然后，我们给这个动画设置了一些过渡效果，包括动画时间、缓动函数等。
总结
通过上述步骤，我们已经成功地使用 CSS Grid 实现了信息夹和小卡片的排列布局。这个布局方式不仅适用于商品列表和新闻文章等网站页面，也可以用于各种其他需要瀑布流式布局的场景。使用 CSS Grid 和一些实用的技巧，我们可以轻松创建出具有良好用户体验的优秀网站页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e889f2f6b2d6eab34160fb