本文聚焦 CSS repeat() 函数的用法全解：从语法到响应式网格布局的实战指南，覆盖从基础语法到实际网格布局的完整流程。
1. CSS repeat() 的基础语法
1.1 repeat() 的基本形式
repeat() 是 CSS Grid 的一个便捷函数，用于把同一种轨道尺寸重复多次，简化网格的列宽/行高定义。它的基本结构是 repeat(count, track-size)，其中 count 表示重复次数，track-size 表示单个轨道的尺寸。
通过简单的示例即可理解：repeat() 可以将多列等分，降低冗长的书写工作量。下面给出一个基础示例，1 行代码即可实现 3 列等分：
.grid { display: grid; grid-template-columns: repeat(3, 1fr); }在这个示例中，grid-template-columns 指定了三列等分，1fr 表示等分的比例单位，确保所有列在主轴方向具有相同的份额。
1.2 语义理解：count 与 track-size
在 repeat() 中，count 可以是具体数字（如 3、4）或比例值（如 auto-fill/auto-fit 的组合使用时才出现的特殊语义），而 track-size 可以是具体尺寸（如 200px、300px）或比例单位（如 1fr、2fr）等。
需要注意的是，当 count 使用固定数量时，轨道将严格按照该数量渲染；当与自适应语义结合时，后续组合才会产生“自适应集合”的效果。
1.3 典型示例：使用不同的轨道尺寸
除了 1fr，你也可以通过组合不同的轨道尺寸来实现混合网格。例如，固定宽度与自适应宽度并存：
.grid { display: grid; grid-template-columns: repeat(2, 150px) 1fr; }这会在前两列固定为 150px，最后一列自适应填充剩余空间。该用法在做商店商品卡片网格时非常常见，让首屏看起来更紧凑。
2. 与 auto-fill 和 auto-fit 的关系
2.1 auto-fill 与 auto-fit 的区别
auto-fill 和 auto-fit 都是结合 repeat() 的强大写法，用于实现更具弹性的网格列数量。区别在于空白列的处理：auto-fill 会在可用空间内“填充”尽可能多的轨道，即使某些轨道没有实际内容也会占据位置；而 auto-fit 在没有内容的轨道上会“收缩”为 0 宽度，使真实内容占满剩余空间。
2.2 典型用法与效果对比
下面几个示例展示了在不同场景下的布局效果差异：
/* auto-fill 示例：即使没有内容也会出现空列 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }/* auto-fit 示例：没有内容的列会收缩，内容分布更紧凑 */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }minmax() 还是常用的搭配工具，在上述示例中确保了列在最小宽度和最大可用宽度之间平滑拉伸。
3. 与 minmax 的组合实现响应式网格
3.1 minmax 的含义与用法
minmax(min, max) 用于指定轨道的最小尺寸和最大尺寸，使网格在不同屏幕尺寸下具有自适应能力。它在响应式网格中非常常用，能避免单列在较窄屏幕下过窄，又能在宽屏下充分利用空间。
3.2 结合 repeat 实现灵活网格
通过把 minmax 与 repeat 结合，开发者可以用极少的代码实现多列自适应。例如：
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }该写法在移动端和桌面端都能保持美观的卡片网格布局，且每个网格单元都具有最小宽度保障与最大可用宽度的伸缩。
4. 实战案例：从语法到响应式网格布局的落地
4.1 基本的响应式产品卡片网格
在产品列表页，常需要根据屏幕宽度自动增减列数，同时保持每个卡片的最小可视宽度。使用 repeat(auto-fit, minmax(250px, 1fr)) 即可实现这一目标，并且保留了足够的间距以提升可读性。
下面给出一个常见场景的实现片段：
.product-grid {display: grid;gap: 16px;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}4.2 组合使用网格间距与边距
除了列的定义，网格的间距 gap、和容器的内外边距也会影响整体的可用性与美观。合理设置可以让自适应变得更加平滑，提升布局的稳定性。
示例代码：
.card { padding: 16px; border: 1px solid #e5e5e5; border-radius: 8px; }5. 命名线与复杂网格的落地
5.1 命名线的基础用法
CSS Grid 允许在轨道线命名中使用名称，以便在网格项的放置中通过名称引用特定的起止线。这在复杂网格布局中尤为有用，提升了代码的可读性与维护性。
命名线的基本写法示例：
.layout {display: grid;grid-template-columns: [left] 1fr [center] 2fr [right] 1fr;
}通过命名线，可以在网格项身上使用 grid-column、grid-row 等属性来对齐和跨跨域放置，例如：
5.2 使用命名线实现跨列定位
通过引用命名线，可以将某个网格项跨越指定的列区间。下例展示了一个网格项跨越从 left 到 right 的区域：
.item {grid-column: left / right;
}或者在对应的网格定义中使用重复结构，结合 repeat() 与命名线实现更复杂的布局组合。
通过以上内容，你可以把 CSS repeat() 的基础语法、auto-fill 与 auto-fit 的差异、以及 minmax 的组合运用，快速落地到实际的响应式网格布局场景中。该指南覆盖的要点与示例，正是进入“从语法到响应式网格布局的实战指南”这一主题的核心要素。
