repeat() 函数是 CSS Grid 和 Flexbox 中用于重复放置元素的函数。通过使用 repeat() 函数，可以方便地定义一个或多个轨道的重复模式。这在创建响应式布局时特别有用。
基本概念
repeat() 函数的基本语法如下：
grid-template-columns: repeat(<重复次数>, <轨道尺寸>);
或者
grid-template-rows: repeat(<重复次数>, <轨道尺寸>);
这里的 <重复次数> 是一个整数，表示要重复的次数；而 <轨道尺寸> 可以是一个固定的长度单位（如 px、em 等），也可以是一个相对单位（如 fr、% 等）。
示例
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}在这个例子中，repeat(3, 1fr) 表示将创建三个等宽的列，每个列占据容器宽度的三分之一。
复杂的重复模式
除了简单的重复之外，还可以使用 minmax() 函数来定义一个范围内的轨道尺寸，这样可以在不同的屏幕尺寸下自动调整轨道的大小。
示例
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}在这个例子中，auto-fill 参数会根据容器宽度自动填充尽可能多的轨道，而每个轨道的最小宽度为 200px，最大宽度为容器宽度的分数单位。
混合使用固定和灵活轨道
有时候需要在网格中同时使用固定宽度和灵活宽度的轨道。可以通过将固定宽度轨道与 repeat() 函数结合使用来实现这一点。
示例
.container {
display: grid;
grid-template-columns: 50px repeat(3, 1fr) 50px;
}在这个例子中，网格有五个轨道：第一个和最后一个轨道宽度固定为 50px，中间三个轨道等宽分布剩余空间。
响应式设计中的应用
在响应式设计中，经常需要根据不同的屏幕尺寸调整网格布局。通过结合媒体查询和 repeat() 函数，可以轻松实现这一目标。
示例
-- -------------------- ---- -------
---------- -
-------- -----
---------------------- ---------------- ------------- ------
-
------ ----------- ------ -
---------- -
---------------------- ---------------- ------------- ------
-
-在这个例子中，当屏幕宽度小于或等于 600px 时，轨道的最小宽度将从 200px 调整为 100px。
总结
repeat() 函数极大地简化了定义网格轨道的方式，使得创建复杂的布局变得更加简单和高效。无论是简单的重复还是复杂的响应式设计，repeat() 都能提供强大的支持。希望这个章节能够帮助你更好地理解和使用 repeat() 函数。