CSS Grid 中如何实现 “等高” 布局
在前端开发中，页面布局是一个非常关键的环节。有时候，我们需要实现多个模块的布局，而且又要保证它们的高度一致，这种布局方式被称为 “等高” 布局。这种布局方式在实践中非常常见，而我们可以使用 CSS Grid 完成这个任务。
什么是 CSS Grid?
CSS Grid 是 CSS 的一个新布局模块，它提供了一种非常强大和灵活的方式来布局网页，并且支持各种各样的布局方式，比如：等高布局。
如何实现 “等高” 布局?
在 CSS Grid 中实现 “等高” 布局非常简单，我们只需要使用 repeat 函数和 minmax 函数即可。
repeat 函数
repeat 函数可以生成一个重复的部分，它的两个参数分别表示重复次数和重复大小。比如，repeat(2,50px) 表示重复两次，每次大小为 50px。
minmax 函数
minmax 函数则表示一个最小值和一个最大值，它可以用来设置一个范围。比如，minmax(200px,auto) 表示最小值为 200px，最大值为 auto。
实现方式
实现 “等高” 布局的方法非常简单，我们可以使用网格布局和 minmax 函数来设置每行的高度，使每个模块的高度最终一致。
下面是一个简单的示例代码：
-- -------------------- ---- -------
------
---- -----------------------
---- ---------------------------
---- ---------------------------
---- ---------------------------
---- ---------------------------
---- ---------------------------
------
-------
-------
--------------- -
-------- -----
---------------------- ---------------- ------------- ------
--------- -----
--------------- ------------- ------
-
--------------- ---------- -
----------------- --------
-
--------在这个示例中，我们首先创建了一个网格容器和五个子元素。我们使用 repeat 函数和 minmax 函数来设置每一行的高度，而且保证最小值为 200px，最大值为 auto。此外，我们使用 auto-fit 将列数设置为自动适应，并且使用 grid-gap 来设置间隔。
最后，我们使用 grid-auto-rows 属性将行高设置为 minmax(200px, auto)。这样，每个子元素的高度都会被设置为最小值 200px，并且最终高度会被自适应调整，使每一行高度一致。
总结
CSS Grid 是一个非常强大和灵活的布局方式，它提供了许多强大的功能，比如 “等高” 布局。在本文中，我们讲解了如何使用 CSS Grid 实现 “等高” 布局，这个方法非常简单，并且可以满足大多数的布局需求。您可以尝试使用此方法来实现网站布局，并且将其应用到您的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64526cba968c7c53b07062f5