在 CSS Grid 布局中，我们可以使用 auto-fit 和 auto-fill 属性来创建弹性容器。这两个属性可以根据项目的数量和容器大小自动调整项目的数量。
auto-fit
auto-fit 属性会自动调整项目的数量以适应容器的大小。如果容器大小足够大，会自动增加项目的数量，如果容器大小不足，会自动减少项目的数量。以下是一个示例：
---- ----------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ------
--------------- - -------- ----- ---------------------- ---------------- ------------- ------ --------- ----- - ----- - ----------------- ----- -------- ----- -
在上面的代码中，我们定义一个 grid-container 容器，它有四个子项目。我们使用 grid-template-columns 定义了一个自适应的网格布局，minmax(200px, 1fr) 意味着项目的最小宽度为 200px，最大宽度为 1fr（即剩余空间的比例）。由于我们使用了 auto-fit 属性，当容器大小足够大时，会自动增加项目的数量，如下图所示：
auto-fill
与 auto-fit 不同的是，auto-fill 会强制填充网格的所有可用空间，即使没有足够的项目来填充所有的行和列。这意味着子项目将自动平铺并占据整个网格，直到没有更多的空间为止。以下是一个示例：
---- ----------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ------
--------------- - -------- ----- ---------------------- ----------------- ------------- ------ --------- ----- - ----- - ----------------- ----- -------- ----- -
在上面的代码中，我们同样定义了一个 grid-container 容器，有四个子项目。我们使用 auto-fill 属性，当容器大小不足以容纳所有项目时，将创建额外的网格行。如下图所示：
使用 auto-fill 后，项目将在网格中自动平铺，直到达到网格的最大宽度。这种机制使我们的网格布局更加灵活，能够自动适应不同类型的内容，并且可以轻松地处理可变的窗口尺寸。
总结
auto-fit 和 auto-fill 是 CSS Grid 布局中非常有用的属性，用于创建弹性容器。它们是自适应的，可以根据项目的数量和容器的大小自动调整项目的数量。当我们需要一个自适应的网格布局时，auto-fit 和 auto-fill 属性是一个非常有用的工具。它们可以让我们省去手动计算和定位项目的麻烦，并让我们的项目可以在不同大小的设备上自适应。
参考代码
你可以使用下面的代码来尝试 auto-fit 和 auto-fill：
---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ------
---------- - -------- ----- ---------------------- ----------------- ------------- ------ --------- ----- -------- ----- - ----- - ----------------- ----- ------ ----- ---------- ----- ----------- ------- -------- ----- -
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6651968ed3423812e457bb9f