CSSGridrepeat函数全解析

CSS Grid 布局中 `repeat()` 函数是简化重复网格轨道的利器。本文**详解 CSS Grid repeat 函数**的使用方法，它通过 `repeat(重复次数, 轨道尺寸)` 快速定义重复的列或行。重复次数可以是数字（固定数量），也可以是 `auto-fill` 或 `auto-fit` 关键字，实现响应式填充。`auto-fill` 按容器填充但不拉伸，`auto-fit` 则拉伸占满。结合 `minmax()` 函数，能构建更灵活自适应的布局，例如响应式卡片列表和相册。掌握 `repeat()` 函数，尤其理解 `auto-fill` 和 `auto-fit` 的差异，能显著提升 Grid 布局效率和代码可维护性。

repeat()函数可简化CSS Grid布局，通过repeat(重复次数, 轨道尺寸)定义重复列或行；数字用于固定数量，auto-fill按容器填充不拉伸，auto-fit则拉伸占满，结合minmax可实现响应式自适应布局。

CSS Grid 布局中的 repeat() 函数是一个非常实用的工具，能帮助我们快速定义重复的网格轨道（列或行），避免手动重复书写相同的尺寸值。它让代码更简洁、易读且易于维护。

repeat() 基本语法

repeat(重复次数, 轨道尺寸) 是 repeat 函数的基本结构。

• 重复次数：可以是数字，也可以是如 auto-fill 或 auto-fit 这样的关键字。
• 轨道尺寸：可以是固定值（如 100px）、弹性单位（如 1fr）或 minmax() 函数。

例如：

表示创建 3 列，每列宽度相等，各占容器的 1/3。

固定数量重复

当你知道确切需要多少列或行时，直接使用数字即可。

• repeat(4, 100px)：创建 4 个 100px 宽的列。
• repeat(6, 1fr)：创建 6 个等宽的弹性列。
• repeat(2, 200px 100px)：交替创建 200px 和 100px 的列，共重复两次，即生成“200px 100px 200px 100px”。

自动填充与适配

使用 auto-fill 和 auto-fit 可以实现响应式布局，根据容器大小自动调整列数。

• repeat(auto-fill, 150px)：尽可能多地填充 150px 宽的列，空间不足时不压缩，留空。
• repeat(auto-fit, 150px)：类似 auto-fill，但会将多余空间分配给现有列，使其拉伸填满容器。
• repeat(auto-fill, minmax(150px, 1fr))：每列最小 150px，最大 1fr，容器宽度变化时自动换行并调整数量。

结合 minmax 使用的灵活布局

搭配 minmax() 可创建高度自适应的网格。

• repeat(3, minmax(100px, auto))：创建 3 行，每行最小高度 100px，内容多时自动撑高。
• repeat(auto-fit, minmax(200px, 1fr))：列最小 200px，超出则换行，剩余空间平均分配。

基本上就这些。合理使用 repeat() 能大幅简化 Grid 布局代码，尤其在构建卡片列表、相册、响应式表格时特别高效。不复杂但容易忽略细节，比如 auto-fill 和 auto-fit 的行为差异，掌握后布局会更得心应手。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSSGridrepeat函数全解析》文章吧，也可关注golang学习网公众号了解相关技术文章。