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（fraction）单位配合 repeat() 可以创建响应式且自适应剩余空间的网格结构。
模板采用响应式设计，自动适应手机，电脑及平板显示；满足单一店铺外卖需求。功能：1.菜单分类管理2.菜品管理：菜品增加，删除，修改3.订单管理4.友情链接管理5.数据库备份6.文章模块：如：促销活动，帮助中心7.单页模块：如：企业信息，关于我们更强大的功能在开发中……安装方法：上传到网站根目录，运行http://www.***.com/install 自动
0
1、grid-template-columns: repeat(5, 1fr); 将容器均分为五等份，每个列占据相等的可用空间。
2、也可混合不同比例：repeat(2, 2fr) 后接 repeat(3, 1fr)，表示前两列占双倍空间，后三列占单倍。
repeat() 支持嵌套使用，可用于构建周期性变化的复杂网格轨道序列。
1、例如：repeat(2, 100px 50px) 会生成 100px、50px、100px、50px 四个轨道。
2、进一步可写成 grid-template-columns: repeat(3, repeat(2, 1fr 2fr));，即每组包含一个 1fr 和一个 2fr 列，并整体重复三次。
将 repeat() 与关键字 auto-fill 或 auto-fit 结合，可在容器尺寸变化时自动调整列数。
1、grid-template-columns: repeat(auto-fill, 100px); 表示尽可能多地填充宽度为 100px 的列，超出则换行。
2、repeat(auto-fit, minmax(100px, 1fr)) 在空间不足时会自动压缩或拉伸每一列，同时保持最小 100px 宽度。
以上就是css中repeat()函数的用法的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
727
收藏
