CSS repeat() 函数

MDN：developer.mozilla.org/en-US/docs/…

repeat() 目前只能在grid-template-columns 和 grid-template-rows 属性中使用。

基本语法

/* <track-repeat> values */
repeat(4, 1fr)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] 1fr [col-end])
repeat(4, [col-start] min-content [col-end])
repeat(4, [col-start] max-content [col-end])
repeat(4, [col-start] auto [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
repeat(4, [col-start] min-content [col-middle] max-content [col-end])

/* <auto-repeat> values */
repeat(auto-fill, 250px)
repeat(auto-fit, 250px)
repeat(auto-fill, [col-start] 250px [col-end])
repeat(auto-fit, [col-start] 250px [col-end])
repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])

/* <fixed-repeat> values */
repeat(4, 250px)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])

• count：重复的次数，可以是正整数或 auto-fill、auto-fit
• track-list：需要重复的轨道尺寸（如长度、百分比、fr 单位等），可以是单个值或多个值的组合。

常见用法示例

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

• auto-fill是剩余空间每多出一个100px就多绘制一个100px的网格空间，小于100px，就把这点空间分配给每个盒子。

• auto-fit：的效果是每个盒子最小100px，不够100px就换行，当有空余的时候，每个盒子膨胀平分所有剩余空间。

需要注意，使用repeat()函数遇到不生效问题请阅读MDN文档的细节，repeat()还是要多用才能会