css中repeat()函数的用法

repeat()函数可简化CSS Grid中重复轨道的定义，语法为repeat(次数, 轨道大小)，支持固定值、fr单位、嵌套及auto-fill/auto-fit动态布局，提升代码可读性与响应式能力。

如果您在使用 CSS Grid 布局时需要定义多个重复的轨道，可以利用 repeat() 函数简化代码书写。该函数能够减少冗余声明，使网格结构更清晰易读。

本文运行环境：MacBook Pro，macOS Sonoma

一、基本语法与结构

repeat() 函数用于在 grid-template-columns 或 grid-template-rows 中重复指定的轨道尺寸模式。它接收两个参数：重复次数和要重复的值。

1、语法格式为 repeat(重复次数, 轨道大小)，其中“重复次数”可以是正整数，“轨道大小”可以是长度单位、fr 单位或 auto 等。

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

2、例如，repeat(3, 100px) 等同于手动书写 100px 100px 100px。

二、固定数量重复列或行

当需要创建具有相同宽度或高度的多个列或行时，repeat() 可以显著缩短代码长度。

1、设置四列等宽的网格容器：grid-template-columns: repeat(4, 200px); 表示生成四个每列宽 200px 的列。

2、同样适用于行方向：grid-template-rows: repeat(3, 50px); 创建三行，每行高 50px。

三、结合 fr 单位实现弹性布局

使用 fr（fraction）单位配合 repeat() 可以创建响应式且自适应剩余空间的网格结构。

标签： css macbook mac macos 弹性布局 cos 代码可读性