CSS Grid 是一种用于创建网格布局的强大工具。使用它可以轻松地创建复杂的布局结构。在本文中，我们将探讨如何使用 CSS Grid 实现等高布局，并提供适当的样例代码。让我们开始吧！
什么是等高布局？
等高布局是指在同一行内的所有元素具有相同的高度。通常，这种布局用于创建包含多个元素的卡片，并且需要确保每个卡片在其它卡片中保持同等高度，无论它们的内容量有多少。
如何使用 CSS Grid 实现等高布局？
CSS Grid 使用两个主要组件来实现布局：
- 网格容器（Grid Container） - 创建一个包含一个或多个网格项目的容器。
- 网格项目（Grid Item） - 在网格容器中放置一个元素。
步骤 1: 创建网格容器
我们首先要做的是创建一个网格容器。我们可以使用 grid-template-columns 属性来定义列的数量和宽度。另外，我们也可以为每列定义一个命名区域。下面是一个基本的示例：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}这将创建一个包含三个等宽的列的网格容器。
步骤 2: 创建网格项目
现在我们需要在网格容器中放置网格项目。我们可以使用 grid-column 属性来定义网格项目要占据的列数。例如，如果我们要让一个网格项目占据两列，我们可以这样写：
.grid-item {
grid-column: span 2;
}我们还可以使用 grid-row 属性来控制项目的行。例如，如果我们希望网格项目跨越两行，我们可以这样写：
.grid-item {
grid-row: span 2;
}步骤 3: 实现等高布局
现在我们已经创建了网格容器和网格项目，我们可以使用 grid-auto-rows 属性来为网格容器中的所有网格项目定义同样的高度。例如，我们可以这样写：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
}这样，我们就可以确保所有网格项目在同一行中具有相同的高度。
示例代码
以下是一个完整的示例代码，演示了如何使用 CSS Grid 实现等高布局：
HTML：
<div class="grid-container"> <div class="grid-item">卡片 1</div> <div class="grid-item">卡片 2</div> <div class="grid-item">卡片 3</div> <div class="grid-item">卡片 4</div> <div class="grid-item">卡片 5</div> <div class="grid-item">卡片 6</div> </div>
CSS：
// javascriptcn.com 代码示例
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
grid-gap: 20px; /* 网格间距 */
}
.grid-item {
background-color: #fff;
padding: 20px;
border: 1px solid #ddd;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
text-align: center;
}总结
在这篇文章中，我们已经学习了如何使用 CSS Grid 实现等高布局。在实践中，CSS Grid 还可以用于更高级的布局需求，如复杂的无序排列和基于命名区域的布局。希望这个例子能帮助你更好地理解 CSS Grid 的工作原理并实现你的合适的布局。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652fa9707d4982a6eb0d86f6