0Pricing
CSS Academy · 课时

Grid 中的 repeat() 与 minmax()

使用 repeat() 和 minmax() 生成多个网格轨道，并定义灵活的尺寸范围。

Grid 中的 repeat() 与 minmax() 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

Grid 上下文中的 repeat()

repeat(count, track-size) 是一个 CSS Grid 函数，可以生成多个轨道定义而无需重复书写。它可以在 grid-template-columns 和 grid-template-rows 中使用。

使用固定数量的 repeat()

创建 4 个等宽列：

  <div class="grid">
    <div>1</div><div>2</div><div>3</div><div>4</div>
  </div>

使用 repeat() 重复模式

重复一组轨道模式：

  <div class="striped-grid">
    <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div>
  </div>

轨道中的 minmax()

minmax(min, max) 定义轨道尺寸的范围：

  <div class="grid">
    <div>1</div><div>2</div><div>3</div>
  </div>

使用 auto-fit 和 minmax()

响应式 Grid 的实用模式：

  <div class="cards">
    <div>Card A</div><div>Card B</div>
  </div>

minmax(min-content, max-content)

轨道尺寸可以使用内在尺寸关键字：

  <div class="labels">
    <div>Label</div><div>Value</div>
  </div>

行中的 minmax()

对行使用 minmax()，使高度由内容决定，同时设置一个最小值：

  <div class="gallery"><div>1</div><div>2</div></div>

使用 fit-content() 设置列尺寸

fit-content(max) 会让轨道宽度适应其内容，但不超过指定的最大值，类似于 max-content，不过增加了上限：

  <div class="layout"><div>Sidebar</div><div>Main</div></div>

结合使用 repeat() 和命名线

重复命名线，以便通过名称定位单个列：

  <div class="grid">
    <div>1</div><div>2</div><div>3</div><div>4</div>
  </div>

使用 auto-fill 和 minmax 创建固定尺寸项目

当项目不应超出其自然尺寸时：

  <div class="gallery">
    <div>1</div><div>2</div><div>3</div>
  </div>

Grid 中的 fr 与百分比

与百分比不同，fr 单位会自动将间距计算在内。使用 gap: 24px 的 repeat(3, 1fr) 会生成 3 个真正等宽的列。使用百分比时则需要通过 calc() 减去间距。

快速检查

repeat(3, minmax(100px, 1fr)) 定义了什么？

回顾

repeat(count, track) 可以生成多个轨道而无需重复书写。minmax(min, max) 定义灵活的轨道尺寸范围。repeat(auto-fit, minmax(280px, 1fr)) 模式是最强大的响应式 Grid 方案：无需任何媒体查询，列会自动响应。使用 fit-content(max) 创建能够适应内容的侧边栏列。

常见问题解答

「Grid 中的 repeat() 与 minmax()」课时是免费的吗？

是的 — 「Grid 中的 repeat() 与 minmax()」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「Grid 中的 repeat() 与 minmax()」这节课中我会学到什么？

使用 repeat() 和 minmax() 生成多个网格轨道，并定义灵活的尺寸范围。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「Grid 中的 repeat() 与 minmax()」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 使用 calc() 进行动态计算
  2. 使用 min()、max() 与 clamp() 实现流式值
  3. Grid 中的 repeat() 与 minmax()
  4. color-mix() 与相对颜色语法
← 返回 CSS Academy