引导者

## 简化网格布局利器：`grid-template-columns`/`grid-template-rows` 与 `repeat()` 函数### 简介在使用 CSS Grid 布局时，`grid-template-columns` 和 `grid-template-rows` 属性用于定义网格的行和列。 然而，当需要创建具有多个相同大小的行或列时，手动指定每个值会变得非常繁琐。 幸运的是，CSS Grid 提供了 `repeat()` 函数，可以轻松地重复网格轨道定义，从而简化代码并提高效率。### `grid-template-columns` 和 `grid-template-rows` 属性

`grid-template-columns`： 定义网格容器中

列

的轨道列表。

`grid-template-rows`： 定义网格容器中

行

的轨道列表。这两个属性接受一个以空格分隔的轨道列表值，每个值表示该轨道的大小。常见的值类型包括：

长度值:

例如 `100px`, `20%`, `1fr` 等

关键字:

例如 `auto`, `min-content`, `max-content` 等例如，以下代码创建了一个具有三列的网格，每列宽度分别为 100px、200px 和 1fr:```css .container {display: grid;grid-template-columns: 100px 200px 1fr; } ```### `repeat()` 函数`repeat()` 函数提供了一种更简洁的方式来定义重复的网格轨道。 其语法如下：``` repeat(重复次数, 轨道大小) ```

重复次数:

指定要重复轨道定义的次数。可以是具体的数字，也可以是关键字 `auto-fill` 或 `auto-fit`。

轨道大小:

定义要重复的轨道的大小，可以使用任何有效的轨道大小值。#### 使用 `repeat()` 函数简化代码例如，要创建一个具有 12 列，每列宽度为 1fr 的网格，可以使用 `repeat()` 函数：```css .container {display: grid;grid-template-columns: repeat(12, 1fr); } ```这比手动编写 12 个 `1fr` 更简洁易读。#### 使用 `repeat()` 函数创建复杂的网格布局`repeat()` 函数还可以与其他轨道大小值组合使用，创建更复杂的网格布局。例如，以下代码创建了一个具有 5 列的网格，其中前两列宽度为 100px，后三列宽度为 1fr:```css .container {display: grid;grid-template-columns: 100px 100px repeat(3, 1fr); } ```#### `auto-fill` 和 `auto-fit` 关键字`repeat()` 函数的重复次数参数可以使用 `auto-fill` 或 `auto-fit` 关键字来自动计算重复次数，以适应可用空间：

`auto-fill`: 尽可能多地创建轨道，即使它们的内容为空白。

`auto-fit`: 与 `auto-fill` 类似，但会折叠空白轨道，使剩余轨道填满可用空间。#### 总结`grid-template-columns`/`grid-template-rows` 属性和 `repeat()` 函数为我们提供了强大的工具来定义灵活高效的网格布局。 通过使用 `repeat()` 函数，我们可以简化代码，提高可读性，并轻松创建复杂的网格结构。

简化网格布局利器：`grid-template-columns`/`grid-template-rows` 与 `repeat()` 函数

简介在使用 CSS Grid 布局时，`grid-template-columns` 和 `grid-template-rows` 属性用于定义网格的行和列。 然而，当需要创建具有多个相同大小的行或列时，手动指定每个值会变得非常繁琐。 幸运的是，CSS Grid 提供了 `repeat()` 函数，可以轻松地重复网格轨道定义，从而简化代码并提高效率。

`grid-template-columns` 和 `grid-template-rows` 属性* `grid-template-columns`： 定义网格容器中**列**的轨道列表。 * `grid-template-rows`： 定义网格容器中**行**的轨道列表。这两个属性接受一个以空格分隔的轨道列表值，每个值表示该轨道的大小。常见的值类型包括：* **长度值:** 例如 `100px`, `20%`, `1fr` 等 * **关键字:** 例如 `auto`, `min-content`, `max-content` 等例如，以下代码创建了一个具有三列的网格，每列宽度分别为 100px、200px 和 1fr:```css .container {display: grid;grid-template-columns: 100px 200px 1fr; } ```

`repeat()` 函数`repeat()` 函数提供了一种更简洁的方式来定义重复的网格轨道。 其语法如下：``` repeat(重复次数, 轨道大小) ```* **重复次数:** 指定要重复轨道定义的次数。可以是具体的数字，也可以是关键字 `auto-fill` 或 `auto-fit`。 * **轨道大小:** 定义要重复的轨道的大小，可以使用任何有效的轨道大小值。

使用 `repeat()` 函数简化代码例如，要创建一个具有 12 列，每列宽度为 1fr 的网格，可以使用 `repeat()` 函数：```css .container {display: grid;grid-template-columns: repeat(12, 1fr); } ```这比手动编写 12 个 `1fr` 更简洁易读。

使用 `repeat()` 函数创建复杂的网格布局`repeat()` 函数还可以与其他轨道大小值组合使用，创建更复杂的网格布局。例如，以下代码创建了一个具有 5 列的网格，其中前两列宽度为 100px，后三列宽度为 1fr:```css .container {display: grid;grid-template-columns: 100px 100px repeat(3, 1fr); } ```

`auto-fill` 和 `auto-fit` 关键字`repeat()` 函数的重复次数参数可以使用 `auto-fill` 或 `auto-fit` 关键字来自动计算重复次数，以适应可用空间：* `auto-fill`: 尽可能多地创建轨道，即使它们的内容为空白。 * `auto-fit`: 与 `auto-fill` 类似，但会折叠空白轨道，使剩余轨道填满可用空间。

总结`grid-template-columns`/`grid-template-rows` 属性和 `repeat()` 函数为我们提供了强大的工具来定义灵活高效的网格布局。 通过使用 `repeat()` 函数，我们可以简化代码，提高可读性，并轻松创建复杂的网格结构。