什么是等高行布局？
等高行布局是一种常用的前端页面布局，其中多个子元素高度相等。通常情况下，我们会通过JS等方式计算子元素的高度并设置相同的高度值。但是，这种方式不够优雅，CSS Grid提供了更简单的实现方式。
CSS Grid简介
CSS Grid是CSS3的一种新的布局方式，它提供了一种简单有效的方式来构建复杂的网格布局系统。CSS Grid布局可以极大地简化HTML代码，优化页面渲染性能，同时也能管理元素间关系，使页面更加易于维护。
CSS Grid实现等高行布局的步骤
以下是实现等高行布局的基本步骤：
- 创建一个网格容器Grid Container，指定列数和行高；
- 在网格容器中创建多个网格项Grid Items，每个项对应一个子元素；
- 指定每个网格项的位置和大小。
接下来我们将详细讲解这三个步骤。
步骤一：创建网格容器
.container {
display: grid; /* 定义为网格布局 */
grid-template-columns: repeat(3, 1fr); /* 3列 */
grid-auto-rows: minmax(200px, auto); /* 高度自适应，最小高度为200px */
gap: 10px; /* 网格间距 */
}上述代码中，我们使用display: grid声明这是一个网格布局容器。使用grid-template-columns定义三列平均分配网格容器的宽度。使用grid-auto-rows定义每个网格项的高度自适应，并设置最小高度为200px。最后，使用gap设置网格间距。
步骤二：创建网格项
<div class="container"> <div class="item">子元素1</div> <div class="item">子元素2</div> <div class="item">子元素3</div> <div class="item">子元素4</div> <div class="item">子元素5</div> <div class="item">子元素6</div> </div>
上述代码中，我们在网格容器中创建了6个子元素。
步骤三：设置网格项的位置和大小
-- -------------------- ---- ------- ------------------ - ------------ - - ---- -- -- ---------------- -- --------- - - ---- -- -- -------------------- -- - ------------------ - ------------ - - ---- -- -- -------------------- -- --------- - - ---- -- -- ---------------- -- - ------------------ - ------------ - - ---- -- -- ---------------- -- --------- - - ---- -- -- -------------------- -- - ------------------ - ------------ - - ---- -- -- ---------------- -- --------- - - ---- -- -- ----------------- --- -- - ------------------ - ------------ - - ---- -- -- -------------------- -- --------- - - ---- -- -- ---------------- -- - ------------------ - ------------ - - ---- -- -- ---------------- -- --------- - - ---- -- -- ----------------- --- -- -
上述代码中，我们使用“grid-column”和“grid-row”定义了网格项的位置和大小，以实现等高行布局。使用“grid-column”指定网格项在网格布局中占据哪几列的位置，跨越几列。使用“grid-row”指定网格项在网格布局中占据哪几行的位置，跨越几行。
通过上述三个步骤，我们实现了等高行布局。
总结
CSS Grid提供了一种简单有效的方式来构建复杂的网格布局系统，实现等高行布局也变得非常简单。通过以上的实例，我们可以看到CSS Grid的优势，同时也需要我们不断探索和尝试更多的CSS Grid布局方式，以实现不同场景下的UI需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647467b1968c7c53b01c814c