CSS Grid 布局是现代前端开发中，最受欢迎的布局方式之一。它提供了一种灵活的方式来创建网格布局，支持多种维度的布局和对齐方式。在 CSS Grid 布局中，repeat 和 auto-fill 是两个非常重要的属性，本文将详细介绍这两个属性的作用和使用方式。
repeat
repeat 函数是一个可以重复一个或多个数值的 CSS 函数，它可以用来定义网格布局中重复的行或列。语法如下：
grid-template-columns: repeat(3, 100px);
这个例子中，我们定义了一个 3 列的网格布局，每一列都是 100px，可以看出 repeat 函数重复了 3 次 100px 这个数值。我们也可以将 repeat 函数嵌套使用，实现复杂的布局，例如：
grid-template-columns: repeat(2, 1fr) repeat(3, 100px) repeat(4, 2fr);
这个例子中，我们定义了 9 列的网格布局，其中前两列和后四列是比例布局，中间三列是固定宽度的 100px。通过嵌套使用 repeat 函数，我们可以轻易地实现各种复杂的布局需求。
auto-fill
auto-fill 属性是 CSS Grid 布局的另一个重要属性，它可以用来自动填充多余的网格单元格。通常情况下，网格的列宽是固定的，但是我们希望根据屏幕宽度的变化，自适应地填充网格布局，这时候就可以使用 auto-fill 属性。
grid-template-columns: repeat(auto-fill, 100px);
这个例子中，我们定义了一个自适应的网格布局，每一列的宽度都是 100px。auto-fill 属性告诉浏览器自动填充多余的网格单元格，以适应屏幕的宽度变化。如果屏幕宽度可以容纳 5 列网格，那么就会显示 5 列网格，如果屏幕宽度只能容纳 3 列网格，那么就会显示 3 列网格。
示例代码
下面是一个演示 repeat 和 auto-fill 属性的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
-------
--------------- -
-------- -----
---------------------- ----------------- -------
--------- -----
-
---------- -
----------------- --------
------- ------
-
--------
-------
------
---- -----------------------
---- ------------------------
---- ------------------------
---- ------------------------
---- ------------------------
---- ------------------------
---- ------------------------
---- ------------------------
---- ------------------------
---- ------------------------
------
-------
-------在这个例子中，我们定义了一个自适应的网格布局，每一列的宽度都是 100px，间隔为 10px。在浏览器中运行这个示例代码，可以看到网格布局根据屏幕宽度的变化自动填充。
总结
通过本文的介绍，我们了解了 CSS Grid 布局中重要的 repeat 和 auto-fill 属性，也学习了如何使用这些属性创建自适应的网格布局。当然，CSS Grid 布局还有更多的功能，我们可以通过不断学习和探索，发挥出 CSS Grid 布局的最大效益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64793e76968c7c53b05446a4