CSS repeat() 函数（完整指南）

CSS repeat() 函数：让布局更智能的秘诀

在前端开发中，我们常常需要处理重复的元素布局，比如网格系统、卡片排列、导航栏等。传统的写法是手动写多个 grid-template-columns 或 grid-template-rows，这不仅冗长，还容易出错。而 CSS 的 repeat() 函数正是为解决这类问题而生的利器。

CSS repeat() 函数 是 CSS Grid 布局中的一个重要语法，它允许我们用简洁的方式重复定义网格轨道（column 或 row）的尺寸。它能显著减少代码量，提升可维护性，尤其适合构建响应式布局。

想象一下，你要在一个页面中创建一个 12 列的网格系统，每列宽度为 80px。如果不使用 repeat()，你得写 12 次 80px，而用 repeat(12, 80px) 一句话就能搞定。这就像用“复制粘贴”代替“手动输入”，效率高，还不容易出错。

接下来，我们将一步步深入理解 repeat() 的用法。

语法结构与基本用法

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

grid-template-columns: repeat(数量, 轨道大小);

其中：

• 数量：要重复的次数，可以是数字，也可以是 auto-fit 或 auto-fill。
• 轨道大小：每一列或每一行的尺寸，可以是像素、百分比、fr 单位、minmax() 等。

举个简单的例子，创建一个 6 列的网格，每列宽度为 100px：

.container {
  display: grid;
  grid-template-columns: repeat(6, 100px); /* 重复 6 次，每次 100px */
  gap: 10px; /* 网格间距 */
}

这里，repeat(6, 100px) 等价于写成 100px 100px 100px 100px 100px 100px，但更简洁，也更容易调整。

再看一个更实用的例子：创建一个 4 列的响应式卡片布局，每列占 25% 宽度：

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 列，每列占等分空间 */
  gap: 15px;
}

这里的 1fr 表示“一等分”，repeat(4, 1fr) 就是将容器宽度均分为 4 份，每列占一份。这种写法在响应式设计中非常常见。

动态重复：auto-fit 与 auto-fill 的区别

repeat() 不仅能固定数量，还能配合 auto-fit 和 auto-fill 实现智能布局，这是它最强大的功能之一。

auto-fill：填满容器

auto-fill 会尽可能多地填充轨道，即使某些轨道为空也会计算进去。它适用于你想“占满空间”的场景。

.auto-fill-example {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

解释：

• minmax(200px, 1fr)：每一列最小宽度 200px，最大宽度为 1fr。
• auto-fill：浏览器会尽可能多地创建列，直到无法再放下一个 200px 的列为止。
• 比如容器宽 800px，最多放 4 列（4 × 200px = 800px），所以会生成 4 列。

auto-fit：合并空列

auto-fit 会把空的轨道“合并”起来，只保留实际有内容的列。它更适合动态内容布局。

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

关键区别：

• auto-fill：即使没有内容，也会创建轨道，只是内容空着。
• auto-fit：空轨道会被压缩合并，只留下有内容的列。

举个例子：一个容器初始宽 600px，内容只有 3 个卡片。用 auto-fit 时，3 个卡片会平均分布，每列占 200px（600 ÷ 3 = 200）。如果容器变宽到 1000px，auto-fit 会自动扩展为 5 列（每列 200px），而 auto-fill 也会生成 5 列，但空列不会显示。

两者的实际应用场景对比

使用 minmax() 配合 repeat() 实现弹性布局

minmax() 是 repeat() 的黄金搭档，它能定义轨道的最小和最大尺寸，让布局更具弹性。

.flexible-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

这个写法的含义是：

• 每列最小宽度为 150px，最大为 1fr（占剩余空间）。
• 浏览器会根据容器宽度决定创建多少列。
• 如果容器太窄，无法放下 150px 的列，会自动换行。

举个真实案例：博客文章列表。每篇文章卡片希望至少 150px 宽，但允许在宽屏下拉伸。

<div class="post-list">
  <article class="post">文章 1</article>
  <article class="post">文章 2</article>
  <article class="post">文章 3</article>
  <!-- 更多文章 -->
</div>

.post-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  padding: 20px;
}

.post {
  background: #f5f5f5;
  padding: 16px;
  border-radius: 8px;
  text-align: center;
}

当屏幕宽度从 320px 到 1200px 变化时，布局会自动调整：

• 320px：只能放 1 列（150px × 2 = 300px < 320px，但 150px × 3 = 450px > 320px）
• 600px：最多放 4 列（150px × 4 = 600px）
• 1200px：最多放 8 列（150px × 8 = 1200px）

这就是 CSS repeat() 函数 与 minmax() 的强强联合，实现真正“自适应”的布局。

常见错误与最佳实践

在使用 repeat() 时，开发者常犯几个典型错误：

错误 1：忘记设置 gap

不设置 gap 会导致网格项紧密贴合，影响可读性。

/* ❌ 错误：没有 gap */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* ✅ 正确：加上 gap */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* 建议 10px ~ 30px */
}

错误 2：auto-fit 与 minmax() 搭配不当

如果 minmax() 的最小值设置过大，可能导致无法创建列。

/* ❌ 错误：最小值大于容器宽度 */
.container {
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  /* 如果容器只有 400px，无法创建任何列 */
}

/* ✅ 正确：设置合理的最小值 */
.container {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

最佳实践建议

• 优先使用 auto-fit 而非 auto-fill，除非你需要占满空间。
• 结合 minmax() 使用，避免布局“崩塌”。
• 使用 1fr 单位实现等分布局，比固定像素更灵活。
• 在响应式设计中，repeat(auto-fit, minmax(150px, 1fr)) 是通用推荐写法。

实战案例：构建响应式产品卡片网格

我们来做一个完整的实战项目：一个电商产品卡片网格。

<div class="product-grid">
  <div class="product">产品 1</div>
  <div class="product">产品 2</div>
  <div class="product">产品 3</div>
  <div class="product">产品 4</div>
  <div class="product">产品 5</div>
  <div class="product">产品 6</div>
</div>

.product-grid {
  display: grid;
  /* 核心：使用 repeat() + auto-fit + minmax() */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.product {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.product:hover {
  transform: translateY(-4px);
}

这个布局在不同设备上表现如下：

• 手机（375px）：1 列
• 平板（768px）：2 列
• 桌面端（1200px）：6 列

整个过程无需写断点，也不需要媒体查询，完全由 CSS repeat() 函数 自动处理。

总结：掌握 repeat()，布局更高效

CSS repeat() 函数 是现代 CSS 布局的基石之一。它不仅让代码更简洁，还能实现真正的响应式布局，让开发者从繁琐的手动布局中解放出来。

通过本篇文章，我们学习了：

• repeat() 的基本语法与使用场景
• auto-fit 与 auto-fill 的本质区别
• 如何与 minmax() 配合实现弹性布局
• 常见错误与最佳实践
• 一个完整的实战案例

如果你还在手动写 100px 100px 100px 这样的重复代码，现在是时候升级你的布局方式了。掌握 CSS repeat() 函数，你不仅能写出更优雅的 CSS，还能提升开发效率和维护性。

记住：好的布局，不是靠“写得多”，而是靠“写得巧”。