CSS Grid 布局是一种强大的网格布局系统，它允许开发者轻松地创建复杂的布局。其中一个主要优势就是网格自适应。在本文中，我们将探讨处理网格自适应的技巧和方法，并提供实用示例。
1. 使用 fr 单位
在 CSS Grid 布局中，我们可以使用 grid-template-columns 和 grid-template-rows 来定义网格的列和行。而使用 fr 单位可以让网格自适应。 fr 单位是指网格轨道的剩余空间分成的一个分数，例如 1fr 表示可用空间的一等分。
示例1
以下代码显示了一个网格布局，其中第一列的宽度为 1fr，第二列的宽度为自适应宽度：
.grid {
display: grid;
grid-template-columns: 1fr auto;
}这意味着，如果第一列的宽度为 200px，那么第二列的宽度将自动适应网格容器的剩余宽度。
示例2
我们也可以使用多个 fr 单位来定义网格布局。例如，以下代码显示了一个网格布局，其中第一列占用剩余宽度的2/3，第二列占用剩余宽度的1/3：
.grid {
display: grid;
grid-template-columns: 2fr 1fr;
}在这个例子中，如果第一列为 600px，则第二列的宽度将自动适应为 300px。
2. 使用 minmax 函数
我们可以使用 minmax 函数设置一个网格容器的最小和最大值。当一个网格项目的宽度大于 minmax 的最小值时，网格项目将开始自适应。而当它的宽度超过了 minmax 的最大值时，网格项目将被放置到下一行。
示例3
以下代码显示了一个网格布局，其中第一列的最小宽度为 300px，而第二列的最小宽度为 100px，并且每列的最大宽度为 1fr：
.grid {
display: grid;
grid-template-columns: minmax(300px, 1fr) minmax(100px, 1fr);
}这意味着，如果第一个网格项目的宽度超过 300px，则第二列的宽度将自动适应网格容器的剩余宽度。而如果第二个网格项目的宽度超过 100px，则该网格项目将放置在下一行。
3. 使用 auto-fill 和 auto-fit 关键字
在 CSS Grid 布局中，我们可以使用 auto-fill 关键字让网格容器自适应，并在前面放置尽可能多的网格元素。而使用 auto-fit 关键字则允许我们调整网格项目的大小，以便它们可以自适应网格容器。
示例4
以下代码显示了一个网格项目布局，其中每个网格项目的宽度为 200px，该布局使用 auto-fill 关键字：
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
}在这个例子中，网格容器将尝试让网格项目自适应，并在前面放置尽可能多的网格项目。这意味着，如果网格容器的宽度为 1000px，则将被放置 5 个网格项目。
示例5
以下代码显示了一个网格项目布局，其中每个网格项目的宽度为 200px，该布局使用 auto-fit 关键字：
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}在这个例子中，当网格项目的宽度超过 200px 时，网格项目将自适应并尝试填充整个网格。如果网格容器的宽度超过了所有网格项目可用的空间，则会添加其他网格项目。
结论
fr 单位、minmax 函数和 auto-fill、auto-fit 关键字是 CSS Grid 布局中处理自适应网格的最强工具。使用它们可以极大地简化你的 CSS 代码，同时提供自适应设计和自适应网格的灵活性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671cb0979babaf620fb1f7b1