CSS Grid 是一种强大和灵活的布局方式，它可以让我们更好地控制网格布局，适用于各种不同的页面布局。在这里，我们将重点关注两个常用的 CSS Grid 属性：auto-fill 和 auto-fit。
auto-fill 与 auto-fit
在实际开发中，auto-fill 和 auto-fit 可以用于创建动态的网格布局。它们提供了一种“自适应”的布局方式，使得网格自动适应不同大小的容器。
具体区别
auto-fill 和 auto-fit 的主要区别在于对于没有足够元素来填充网格的情况的处理方式不同。auto-fill 会保持网格的大小，而 auto-fit 会缩小网格以适应可用空间。
auto-fill 示例代码
下面是一个 auto-fill 的示例，它可以用来创建一个自适应的网格布局：
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 20px;
}该代码指的是，让网格布局自适应容器大小，每行的列数根据容器宽度和最小列宽来计算，保证每个列的宽度不小于 200px。
auto-fit 示例代码
下面是一个 auto-fit 的示例，它可以用来创建一个自适应的网格布局：
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}该代码与 auto-fill 的区别在于，网格布局会自适应容器大小，每行的列数根据容器宽度和最小列宽来计算，但如果剩余的空间不足以容纳一个列，则会缩小列来适应空间。
深入理解
理解 auto-fill 和 auto-fit 的区别很重要，因为它们可以帮助我们更好地控制网格布局。在实践中，您可以选择使用其中任何一个来创建自适应的网格布局，而不必考虑纯 css 的计算方式。
下面是一个深入理解的示例，它能够更好地展示 auto-fill 和 auto-fit 的区别。我们将首先使用 auto-fill 来创建一个网格布局：
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 20px;
}我们在一个 800px 的容器中，使用上述代码创建了一个 4 列的网格布局。每列的最小宽度为 200px，但如果再多容纳一个 200px 的列会导致元素溢出网格，那么该列将不会被创建。因此，结果将是一个 3 列的网格布局。
下面我们将使用 auto-fit 来创建同样的网格布局:
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}与 auto-fill 不同，auto-fit 将在同样的容器下创建一个 4 列的网格布局。这是因为它会自动缩小每列的宽度来适应可用空间，直到可以创建第四列为止。
指导意义
根据上述分析，auto-fill 和 auto-fit 可以在不同情况下使用。你可以使用 auto-fill 来确保网格布局容器的大小不变，也可以使用 auto-fit 来让网格布局自动缩小以适应容器。但是，要记住，auto-fill 和 auto-fit 的计算方式都是基于可用空间和最小尺寸来计算的，因此您需要根据您的实际需求和布局要求，选择最适合您的属性来创建网格布局。
结论
在 CSS Grid 布局中，auto-fill 和 auto-fit 的区别在于最后一行或最后一列的宽度不足以容纳一个完整的网格单元时的处理方式。auto-fill 会保持网格的大小，而 auto-fit 会缩小网格以适应可用空间。
如何使用 auto-fill 和 auto-fit 取决于您的布局需求。根据您的具体情况选择合适的属性，以创建自适应的网格布局。
参考
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/671c18b39babaf620faefcd5) ，转载请注明来源 [https://www.javascriptcn.com/post/671c18b39babaf620faefcd5](https://www.javascriptcn.com/post/671c18b39babaf620faefcd5)