css Grid重复函数repeat使用方法

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。

立即学习“前端免费学习笔记（深入）”；

降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

113

查看详情

固定数量重复

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

• 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 的行为差异，掌握后布局会更得心应手。

以上就是css Grid重复函数repeat使用方法的详细内容，更多请关注php中文网其它相关文章！