CSS repeat() 函数（一文讲透）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在现代网页开发中，CSS 的灵活性和强大功能不断推动着布局设计的边界。其中，CSS repeat() 函数 作为 CSS Grid 和 Flexbox 布局的核心工具之一，为开发者提供了高效创建重复轨道（tracks）的解决方案。无论是构建响应式网格系统、动态分栏布局，还是简化代码逻辑，repeat() 都能以简洁的语法大幅降低开发复杂度。本文将从基础到进阶，结合实际案例，深入解析 CSS repeat() 函数 的工作原理与应用场景，帮助读者掌握这一工具的核心价值。

一、基础语法与核心概念

1.1 语法结构

repeat() 函数的基本语法如下：

repeat( <repetition-count> , <track-list> )  

其中：

• <repetition-count>：重复的次数，可以是具体的整数（如 3）或 auto-fit/auto-fill 等关键字。
• <track-list>：需要重复的轨道定义，例如 1fr、minmax(200px, 1fr) 等。

形象比喻：
可以把 repeat() 理解为“批量生产轨道的工厂”。例如，repeat(3, 1fr) 就像工厂生产了 3 个相同的“轨道零件”，每个零件的宽度都是 1fr。

1.2 参数详解

二、参数组合与使用场景

2.1 固定重复次数的简单布局

案例：等宽三栏布局

.container {  
  display: grid;  
  grid-template-columns: repeat(3, 1fr);  
}  

这里 repeat(3, 1fr) 表示生成 3 个等分的轨道，每个轨道占据 1fr 的空间（即容器宽度的 1/3）。这种写法比手动写 1fr 1fr 1fr 更简洁，且易于调整列数。

2.2 动态响应式布局

案例：自适应网格系统

.grid-container {  
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  
}  

• auto-fit：根据容器宽度自动调整轨道数量，当容器变窄时，轨道会合并以适应空间。
• minmax(200px, 1fr)：轨道最小宽度为 200px，最大可扩展为 1fr。

效果：当屏幕宽度小于 600px 时，会显示 3 列；当宽度大于 800px 时，自动扩展为 4 列，实现无缝响应式布局。

三、进阶技巧与组合应用

3.1 与 calc() 结合生成复杂轨道

/* 生成 4 个轨道，其中前两个轨道固定宽度，后两个等分剩余空间 */  
.container {  
  grid-template-columns: repeat(2, 200px) repeat(2, calc((100% - 400px)/2));  
}  

通过嵌套 repeat() 和 calc()，可以精确控制轨道的分布比例，适用于需要混合固定与弹性布局的场景。

3.2 多维布局的复用性

在 CSS Grid 中，repeat() 可以同时作用于行和列：

.grid {  
  grid-template-rows: repeat(3, 100px);  
  grid-template-columns: repeat(4, auto);  
}  

这种写法能快速创建 3 行 4 列的网格布局，特别适合表格或卡片式设计。

四、常见误区与解决方案

4.1 参数顺序错误

错误写法：

/* 误将轨道列表放在重复次数前 */  
grid-template-columns: repeat(minmax(200px, 1fr), auto-fit);  

正确写法：

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  

原因：repeat() 的参数顺序是 先重复次数，后轨道定义，参数顺序颠倒会导致语法错误。

4.2 auto-fit 与 auto-fill 的混淆

• auto-fill 的陷阱：
  当容器空间不足以容纳所有轨道时，auto-fill 会保留空轨道，可能导致布局间隙。

  /* 可能产生空轨道 */  
  grid-template-columns: repeat(auto-fill, 200px);  
  

• 解决方案：
  结合 minmax() 控制轨道最小尺寸，例如：

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  
  

五、浏览器兼容性与替代方案

5.1 兼容性现状

截至 2023 年，repeat() 函数在主流浏览器中已全面支持，包括 Chrome 57+、Firefox 51+、Safari 10.1+ 等。开发者可通过 Can I Use 查看实时兼容性数据。

5.2 兼容性不足时的替代方案

若需支持旧版浏览器，可用 grid-template-columns 的手动定义方式替代：

/* 替代 repeat(3, 1fr) */  
grid-template-columns: 1fr 1fr 1fr;  

虽然代码冗余，但能确保兼容性。

六、实战案例：动态卡片式布局

6.1 需求分析

设计一个响应式卡片列表，要求：

• 移动端显示 1 列，宽度 100%；
• 平板端显示 2 列，每列 45% 宽度；
• 桌面端显示 3 列，每列 30% 宽度；

6.2 实现代码

.cards-container {  
  display: grid;  
  gap: 20px;  
  grid-template-columns: repeat(  
    auto-fit,  
    minmax(300px, 1fr)  
  );  
}  

解析：

• auto-fit 确保轨道自动适应容器宽度。
• minmax(300px, 1fr) 定义最小宽度为 300px，最大为 1fr，保证卡片在不同屏幕下均匀分布。

效果：

• 当容器宽度 ≥ 900px（3×300px）时，显示 3 列；
• 宽度在 600px 到 900px 时，显示 2 列；
• 宽度 < 600px 时，显示 1 列。

结论

CSS repeat() 函数 通过简洁的语法和强大的灵活性，成为现代布局设计的“瑞士军刀”。从基础的固定轨道到复杂的响应式系统，它都能提供高效的解决方案。掌握其核心逻辑和参数组合，不仅能减少代码冗余，还能显著提升开发效率。对于初学者，建议从简单案例入手，逐步尝试与 grid-template-rows、flex 等属性的结合；中级开发者则可探索与 calc()、minmax() 的高级用法。通过实践，你将发现 CSS repeat() 函数在布局优化中的无限可能。

下一步行动：
尝试用 repeat() 重构现有项目的布局代码，对比手动定义轨道的差异，并观察响应式效果的提升。