介绍
CSS Grid 布局是一种强大的布局方式，它能够让我们以一种更灵活的方式来设计和布局网页。其中 auto-fit 和 auto-fill 是两个非常有用的属性，它们可以帮助我们快速地创建自适应的网格布局。
在本文中，我们将深入讨论 auto-fit 和 auto-fill 的用法，并通过示例代码演示如何在 CSS Grid 布局中应用它们。
auto-fit
auto-fit 可以让网格项自动适应容器的大小，并自动填充网格。如果容器的宽度增加，auto-fit 会自动增加网格项的数量，使它们填充整个容器。
下面是一个示例代码：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}在这个示例中，我们使用了 repeat() 函数来创建一个重复的网格模板。auto-fit 参数告诉浏览器，它应该自动适应容器的大小，并自动填充网格项。minmax() 函数指定了每个网格项的最小和最大宽度，这里我们设置为 200px 和 1fr。
auto-fill
auto-fill 与 auto-fit 类似，也可以让网格项自动适应容器的大小，并自动填充网格。但是，它与 auto-fit 的区别在于，当容器的宽度增加时，auto-fill 仅会增加网格项的数量，但不会增加网格项的大小。
下面是一个示例代码：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}在这个示例中，我们同样使用了 repeat() 函数来创建一个重复的网格模板。auto-fill 参数告诉浏览器，它应该自动适应容器的大小，并自动填充网格项。minmax() 函数同样指定了每个网格项的最小和最大宽度，这里我们设置为 200px 和 1fr。
总结
auto-fit 和 auto-fill 是两个非常有用的属性，在 CSS Grid 布局中可以帮助我们快速地创建自适应的网格布局。它们的用法非常简单，可以通过 repeat() 函数来实现。
在实际开发中，我们可以根据需要选择使用 auto-fit 或 auto-fill，以达到最佳的布局效果。
示例代码
-- -------------------- ---- -------
---- -----------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- --------------------------
---- --------------------------
---- --------------------------
------
-------
--------------- -
-------- -----
---------------------- ---------------- ------------- ------
--------- -----
-
---------- -
----------------- -----
-------- -----
----------- -------
-
--------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660e77cbd10417a222efe25d