repeat()函数可简化CSS Grid布局，通过repeat(重复次数, 轨道尺寸)定义重复列或行；数字用于固定数量，auto-fill按容器填充不拉伸，auto-fit则拉伸占满，结合minmax可实现响应式自适应布局。
CSS Grid 布局中的 repeat() 函数是一个非常实用的工具，能帮助我们快速定义重复的网格轨道（列或行），避免手动重复书写相同的尺寸值。它让代码更简洁、易读且易于维护。
repeat() 基本语法
repeat(重复次数, 轨道尺寸) 是 repeat 函数的基本结构。
-
重复次数：可以是数字，也可以是如
auto-fill或auto-fit这样的关键字。 -
轨道尺寸：可以是固定值（如
100px）、弹性单位（如1fr）或minmax()函数。
例如：
grid-template-columns: repeat(3, 1fr);表示创建 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 的行为差异，掌握后布局会更得心应手。
