什么是 CSS Grid 布局
CSS Grid 布局是一种二维的布局模式，可以让我们更方便地对一个网格进行布局。我们可以将整个布局分成多行和多列，并将网格的元素放置在这些行和列的交叉点上。
fr 单位
在 CSS Grid 布局中，我们可以使用 fr 单位来定义行或列的大小。fr 单位的全称是 “fraction”，中文翻译是 “分数” 或 “比例”。
通过使用 fr 单位，我们可以轻松地实现一个动态的布局，因为 fr 单位的大小是相对于容器宽度（或高度）的。
例如，以下代码定义了一个包含两列的网格布局：
--------------- - -------- ----- ---------------------- --- ---- -
这个布局中的第一行宽度为容器宽度的 1/3，第二列宽度为容器宽度的 2/3。
minmax() 函数
在某些情况下，我们希望在行或列的大小超过或少于特定的值时，网格会自动调整大小。通过使用 minmax() 函数，我们可以设置一个网格项的大小范围。
例如，假设我们有一个带有三列的网格布局，并且希望网格项在宽度超过 200 像素时自动调整大小。我们可以将网格的列大小设置为 minmax(100px, 1fr)，这将使第一行的最小宽度为 100 像素，最大宽度为容器宽度的 1/3，而第二和第三列将自动适应大小。
--------------- - -------- ----- ---------------------- ------------- ---- --- ---- -
动态百分比布局示例
假设我们有一个网格布局，在电脑屏幕上有三列，而在手机屏幕上只有一列。我们希望在手机上每个网格项的宽度占整个屏幕的 90%，而在电脑屏幕上每个网格项的宽度相等。
下面是如何实现这个布局：
--------------- -
-------- -----
---------------------- --------- ----- -- --------- - - --
-
------ ---- ------ --- ----------- ------ -
--------------- -
---------------------- ---- -- --------- - ------- --- --- --
-
-现在我们已经成功地实现了一个动态百分比布局，这个布局可以根据设备的屏幕尺寸进行自动调整，而不需要我们手动修改代码。
总结
在 CSS Grid 布局中，通过使用 fr 单位和 minmax() 函数，我们可以实现一个动态的百分比布局。这个布局可以根据设备的屏幕尺寸进行自动调整，而不需要手动修改网格的大小和位置。
通过学习这种布局方法，我们可以更好地掌握 CSS Grid 布局，并创建适应多种设备的响应式布局。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654841e67d4982a6eb289eff