css Grid重复函数repeat使用方法_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

2025-10-26

浏览次数：次

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

css grid重复函数repeat使用方法

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

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

例如：

grid-template-columns: repeat(3, 1fr);

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

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

小爱开放平台

小米旗下小爱开放平台

291 查看详情小爱开放平台

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

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

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

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

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