一、简介

包含多个轨道的大型网格可使用 repeat() 标记来重复部分或整个轨道列表。
repeat() 函数接受两个参数：

• 第一个参数是重复的次数：可以是一个正整数，也可以是一个关键字，如auto-fit。
• 第二个参数是重复的内容：可以是一个轨道大小，也可以是一个轨道名称（grid-template-areas中）。

repeat() 函数可以用于任何 CSS 属性，例如 grid-template-columns、grid-template-rows、grid-template-areas 等。

二、具体使用

用法 1: 重复轨道大小

包含多个轨道的大型网格可使用 repeat() 标记来重复部分或整个轨道列表。如下方的网格定义：

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

可以写为：

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

用法 2: 重复轨道大小

Repeat 标记可以用于重复轨道列表中的一部分。在下面的示例中我创建了一个网格，其起始轨道为 20 像素，接着重复了 6 个 1fr 的轨道，最后再添加了一个 20 像素的轨道。

.wrapper {
  display: grid;
  grid-template-columns: 20px repeat(6, 1fr) 20px;
}

用法 3: 重复轨道大小

Repeat 标记可以传入一个轨道列表，因此你可以用它来创建一个多轨道模式的重复轨道列表。在下一个示例中，网格将有共计 10 个轨道，为 1 个 1fr 轨道后面跟着 1 个 2fr 轨道，该模式重复 5 次。

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr 2fr);
}

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24