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