卡片式布局在现代网站中非常流行，尤其是在电商网站中。卡片式布局通常包含图片、标题、描述和按钮等。
传统的布局方式是通过浮动实现的，但是这种方式不是很灵活，不适用于不同大小的屏幕。CSS Grid 布局提供了更好的解决方案，可以轻松地实现卡片式布局，而不需要使用复杂的 JavaScript。
CSS Grid 布局简介
CSS Grid 布局是一种二维的网格布局系统，它可以方便地管理行和列。一个网格可以被分为多个小网格，这使得布局更加灵活，并且能够应对不同的屏幕大小。
以下是一个简单的 CSS Grid 布局示例：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --- --- ---- --------- ----- - ---------- - ----------------- ----- -------- ----- -
在这个例子中，我们定义了一个名为 .grid-container 的容器，并且使用 display: grid 属性来启用 CSS Grid 布局。我们还定义了三个等分宽度的列，并且设置了间距。
接下来，我们定义了一个 grid-item 类，这个类的元素将作为网格的子元素。我们还设置了背景颜色和内部填充。
使用 CSS Grid 布局实现卡片式布局
接下来，我们将演示如何使用 CSS Grid 布局实现卡片式布局。
首先，我们将定义一个名为 .card-container 的容器，它将包含卡片元素。我们将使用 CSS Grid 布局来配置这个容器的行和列。
.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 10px;
}在上面的例子中，我们使用 repeat(auto-fit, minmax(300px, 1fr)) 来定义列。这个值将自动创建多个列，以适应容器的宽度，并且每个列都将拥有至少 300px 的宽度。 grid-gap 属性用于设置卡片之间的间隔。
接下来，我们将为每个卡片定义一个 .card 类：
.card {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
overflow: hidden;
}在这个例子中，我们定义了卡片的样式，包括背景颜色、边框、边框半径和阴影。
最后，我们将使用以下示例代码来实现卡片布局：
-- -------------------- ---- -------
---- -----------------------
---- -------------
---- ----------------------------------------- --
-------- ----------
------- ---------------
-- ------------- --------
------
---- -------------
---- ----------------------------------------- --
-------- ----------
------- ---------------
-- ------------- --------
------
---- -------------
---- ----------------------------------------- --
-------- ----------
------- ---------------
-- ------------- --------
------
---- -------------
---- ----------------------------------------- --
-------- ----------
------- ---------------
-- ------------- --------
------
---- -------------
---- ----------------------------------------- --
-------- ----------
------- ---------------
-- ------------- --------
------
---- -------------
---- ----------------------------------------- --
-------- ----------
------- ---------------
-- ------------- --------
------
------在这个例子中，我们包含了多个卡片元素。每个卡片都包含了一个图片、标题、描述和按钮等元素。
总结
使用 CSS Grid 布局可以方便地实现卡片式布局。它比传统的布局方式更加灵活，并且适用于不同大小的屏幕。通过本文的演示，您可以轻松地创建卡片式布局，并且能够轻松地自定义每个卡片的样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a5064a48841e989417690c