在前端开发中，经常需要将多列元素的高度设置为相等，以达到更美观的布局效果。传统的方法是使用 JavaScript 来计算元素的高度并设置相同的高度，但这会增加页面的加载时间和性能开销。CSS Grid 布局可以很好地解决这个问题，本文将详细介绍如何使用 CSS Grid 实现等高列布局。
CSS Grid 布局简介
CSS Grid 布局是一种二维的布局系统，使用行和列来创建网格布局。它提供了比传统的 float 和 position 等布局方式更强大、更灵活的布局方式，同时它也能够很好地解决等高列的问题。
如何实现等高列布局
实现等高列布局的基本思路是将多个元素放在同一个容器中，然后使用 CSS Grid 布局将它们放入同一行，使它们高度相等。具体实现步骤如下：
- 将多个元素放在同一个容器中，并设置容器的 display 属性为 grid，这样就创建了一个网格容器。
<div class="container"> <div class="col">Column 1</div> <div class="col">Column 2</div> <div class="col">Column 3</div> </div>
.container {
display: grid;
}- 设置网格的列数和列宽度。在本例中，我们创建了三列，每列宽度为 1fr，表示每列的宽度相等。
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}- 设置网格中每个单元格的间距和对齐方式。在本例中，我们将列与列之间的间距设置为 20px，并将列内容垂直居中。
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
align-items: center;
}- 设置每个列元素的高度为下面元素中最高元素的高度。在本例中，我们使用 JavaScript 来获取每列元素的高度，然后设置所有列的高度为最大高度。
-- -------------------- ---- -------
----- ---- - ----------------------------------
--- --------- - --
---------------- -- -
-- ----------------- - ---------- -
--------- - -----------------
-
---
---------------- -- -
---------------- - --------- - -----
---完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ ------ ---------------
-------
---------- -
-------- -----
---------------------- --- --- ----
--------- -----
------------ -------
-
---- -
----------- -----
-------- -----
-
--------
-------
------
---- ------------------
---- ------------------ -------
---- ------------------ -------
---- ------------------ ----------- ---- ---- ----------
------
--------
----- ---- - ----------------------------------
--- --------- - --
---------------- -- -
-- ----------------- - ---------- -
--------- - -----------------
-
---
---------------- -- -
---------------- - --------- - -----
---
---------
-------
-------总结
使用 CSS Grid 布局可以很方便地实现等高列布局。将多列元素放在同一个容器中，在容器中使用 CSS Grid 布局将元素放入同一行，并设置每个元素的高度为最高元素的高度。这种方法减少了使用 JavaScript 计算和设置高度的复杂性，提高了页面的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6518eda895b1f8cacd130a11