网页布局一直是前端编程中的一个重要环节。而等高布局，也就是在相同的容器中，让多个子元素等高排列，是一个常见的需求。在本文中，我们将介绍如何使用 CSS Grid 实现等高布局。
什么是 CSS Grid？
CSS Grid 是一个新的 CSS 布局模块，它允许开发者快速而简单地创造复杂的布局。它基于网格形式，可以让开发者更好地控制内容如何分配到行和列中。这个新的布局方式为我们提供了极大的灵活性，让我们可以轻松地将内容布置到正确的位置。
使用 CSS Grid 实现等高布局
CSS Grid 可以让我们更加轻松地实现等高布局。我们只需要设置好我们的网格，然后将每个子元素描绘成一个行和一个列。
我们可以通过以下步骤来实现等高布局：
1. 创建一个网格容器
首先，我们需要创建一个网格容器，即一个包含所有子元素的父元素。我们将使用 display: grid 属性来设置这个容器。
.container {
display: grid;
}2. 设置网格的行和列
接下来，我们需要在容器上定义一些行和列。我们使用 grid-template-columns 将容器分成多列（例如，3列，每列占据 1fr），然后使用 grid-template-rows 将容器分成多行。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
}3. 将子元素的位置放在相应的网格中
现在，我们已经定义好了行和列，我们需要指定每个子元素应该放在哪个网格中。我们使用 grid-row 和 grid-column 属性来实现。
-- -------------------- ---- ------- ------- - --------- -- ------------ - - -- - ------- - --------- -- ------------ - - -- - ------- - --------- -- ------------ - - -- -
4. 启用等高布局
在上面的步骤中，我们只是让每个子元素分别在相应的网格中展示。现在，我们需要启用等高布局，即让每一个子元素的高度相同。
我们可以通过以下样式来实现等高布局：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- ------------------- ---- - -------- -------- ------- - ------- ----- -
完整示例代码
以下是一个完整的示例代码：
<div class="container"> <div class="item-1">Item 1</div> <div class="item-2">Item 2</div> <div class="item-3">Item 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- ------------------- ---- - ------- - --------- -- ------------ - - -- ------- ----- - ------- - --------- -- ------------ - - -- ------- ----- - ------- - --------- -- ------------ - - -- ------- ----- -
总结
CSS Grid 提供了一种新的方式来实现等高布局。通过创建一个网格容器，我们可以更灵活地控制子元素的位置，而使用 grid-template-columns 和 grid-template-rows 属性则可以更好地定义网格。然后，我们就可以使用 grid-row 和 grid-column 属性把每个子元素放到相应的网格中，最后启用等高布局即可。这是一个简单而强大的技术，值得前端开发者在实现网页布局时掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647d6c11968c7c53b0838239