CSS 函数 repeat（） 用于表示标题列表的重复部分，这是一种更简洁的方式来定义具有重复模式的大量列或行。
此功能可以在 CSS 网格属性 grid-template-columns 和 grid-template-rows 中使用。
repeat（） 函数接受两个参数：
- repeat count：第一个参数定义曲目列表应重复的频率。它可以设置为 1 或更大的整数值，也可以设置为关键字 auto-fill 或 auto-fit。
- tracks：第二个参数选择应复制哪些轨道。<track-size> 或 <fixed-size> 变量可用于提供定义这些轨道的一个或多个大小值。
可能的值
<fixed-size>
可以采用以下形式之一：
- <length-percentage> 值
- 带有 min（以 <length-percentage>表示）、max（表示为 <length-percentage> 值、<flex> 值或关键字：min-content、max-content 或 auto 的 minmax 函数
- 带有 min（以<length-percentage>或关键字之一：min-content、max-content 或 auto）表示的 minmax 函数，max 以 <length-percentage> 值表示。
<flex> - 具有非负值的维度，它使用单位 fr 来指示轨迹的柔韧性因子。
<length> - 正整数长度。
<line-names> - 一个或多个 <custom-ident> 值用空格分隔，并用方括号括起来，例如：[first header-start]。
<percentage> - 为列网格轨道提供的 <percentage> 数字基于网格容器的内联大小，而对于行网格轨道，它基于网格容器的块大小。如果网格容器的轨道控制其大小，则< percentage> 被视为自动。
auto - 在最大值下，它对应于 max-content。在最小值下，它表示网格轨道中网格项的最大最小大小（由最小宽度/最小高度定义）。
auto-fill：根据需要自动创建任意数量的轨道以填充网格容器，而不会导致溢出。这将同时显示空轨道和已填充轨道。请注意，空轨道是没有网格项的列或行。
auto-fit：根据需要自动创建任意数量的轨道以填充网格容器，而不会造成溢出。它将空轨道折叠为 0px。请注意，空轨道是没有网格项的列或行。
max-content - 它表示放置在网格轨道中的网格元素对 max-content 的最大贡献。
min-content - 它表示网格轨道内网格项的最大最小内容贡献。
CSS repeat（） - 使用 auto-fit 和 minmax（）
在以下示例中，CSS 属性 grid-template-columns 使用 repeat（） 函数创建响应式网格布局。
auto-fit 参数根据可用空间动态调整列数，minmax（200px， 1fr） 指定每列的宽度应至少为 200 像素，但可以与可用空间成比例增长。
<html>
<head>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 20px;
background-color: #f4f4f4;
color: #333;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.grid-item {
background-color: #3498db;
padding: 20px;
text-align: center;
color: white;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
@media (max-width: 600px) {
.container {
grid-template-columns: repeat(1, 1fr);
}
}
@media (min-width: 601px) and (max-width: 900px) {
.container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 901px) and (max-width: 1200px) {
.container {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1201px) {
.container {
grid-template-columns: repeat(4, 1fr);
}
}
</style>
</head>
<body>
<div class="container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
<div class="grid-item">Item 7</div>
<div class="grid-item">Item 8</div>
<div class="grid-item">Item 9</div>
<div class="grid-item">Item 10</div>
</div>
</body>
</html>
