深入探究CSS repeat()函数知识及用法

今天为大家讲解一下我最近学的一个 CSS 中 repeat()函数的知识，repeat()函数要想理解透彻它，熟练掌握，需要大家花点时间去学习，因为我也查了很多资料，那么，该如何讲才能让大家更容易理解呢？想了一下，还是从实例入手，一步一步带大家去深入学习它，当然，有很多不足的地方大家多多担待，也希望大家在评论区提出你们的更好的关于 repeat()函数的知识。

repeat()函数兼容性

Edge 16+支持，然后 Firefox 浏览器那里有个上标^③表示 Firefox 浏览器暂时只支持列属性的 repeat()函数。主要你的项目不是需要兼容非常老的手机，移动端是可以放心使用的。

实例介绍 CSS repeat()函数

CSS repeat()函数只能作用在 grid-template-columns 和 grid-template-rows 这两个 CSS 属性上，由于目前 Firefox 浏览器只支持在 grid-template-columns 属性上使用 repeat()函数，所以本文接下来所有案例都只显示列，也就是宽度的设置。

1.repeat()函数作用

先看下面代码：

.container {
    grid-template-columns: 40px auto 60px;
}

表示我们的布局分为三列，每列的宽度分别是 40px，auto，以及 60px。

没有任何问题，再看下面代码：

.container {
    grid-template-columns: 40px auto 60px 40px auto 60px;
}

表示我们的布局分为六列，每列的宽度分别是 40px，auto，60px，40px，auto，60px。

好像也没什么问题。

现在，假设我们的布局是 12 列的，请问，CSS 代码会是怎样的？

如果按照上面写法，是不是应该写成下面这样？

.container {
    grid-template-columns: 40px auto 60px 40px auto 60px 40px auto 60px 40px auto 60px;
}

哇，就像老太太裹脚布——又臭又长。

代码量多，看得眼花，还不好理解，维护起来也不方便。

此时，repeat()的价值就体现了，什么，12 列？小菜一碟。请看表演：

.container {
    grid-template-columns: repeat(4, 40px auto 60px);
}

非常好理解，重复 4 次，每次的重复单元是 40px auto 60px 这 3 个尺寸。

于是就有如下 GIF 所示的效果（点击播放，112K），是我最爱的深天蓝色哦：

具体代码如下：

css 代码：

.container {
    display: grid;
    grid-column-gap: 5px;
    grid-template-columns: repeat(4, 40px auto 60px);
}
.mybj-col {
    background-color: deepskyblue;
    text-align: center;
    color: #fff;
    padding: 50px 0;
}

HTML 代码：

<div class="container">
    <div class="mybj-col"></div>
    ... //省略 11 个，自己练习的话写全
</div>

2.repeat()函数可以同时多个

例如，前面 3 列宽度都是 40px，紧跟着 3 列宽度是 60px，剩下 1 列宽度 auto，则可以这么设置：

.container {
    grid-template-columns: repeat(3, 40px) repeat(3, 60px) auto;
}

效果如下 GIF 截屏所示：

主要 css 代码：

.container {
    display: grid;
    grid-column-gap: 5px;
    grid-template-columns: repeat(3, 40px) repeat(3, 60px) auto;
}

3.repeat()函数支持对网格线命名

如果网格线的命名也是重复有规律的，则也可以用在 repeat()函数中，

例如：

.container {
    grid-template-columns: repeat(3, [col-start] 1fr [col-end]) auto;
}

其中，[col-start]和[col-end]只是一个自定义的命名，没有什么特殊的含义，关键是[]，至于里面写的内容，其实只要大家看得懂就行，这里，直接 repeat(3, [列开始] 1fr [列结束])也是一样的效果。

网格线命名主要给 Grid 布局中的子项使用的，具体可以参见写给自己看的“CSS Grid 网格布局实例教程”一文。

其他关键字和函数

上面的案例中，repeat()函数只演示了数值类型和 auto 关键字的效果。

实际上，CSS repeat()函数还支持其他多个关键字和函数。

1.min-content/max-content

min-content 和 max-content 尺寸是根据内容来的，min-content 是最小内容尺寸，中文的最小内容单位是一个汉字，英文的最小内容单位是单词，因此 min-content 最终宽度是所有这些最小内容单元最长的那个单元宽度；max-content 是最大内容宽度，可以理解为文本内容不换行时候的宽度。

这里，我们通过一个案例看看 min-content/max-content 在 Grid 布局中的效果，CSS 代码如下：

.container {
    grid-template-columns: repeat(2, min-content auto max-content) auto;
}

如下 GIF 录屏图片所示：

min-content 所在列的宽度就是单词 content 的宽度；max-content 所在列的宽度就是整个语句不换行时候的宽度。

min-content 和 max-content 在实际开发的时候是不会相对于字符进行尺寸设定的，而是相对于图片或者内联性质的容器元素，比方说容器宽度不确定同时一行最多显示一个容器（min-content），或者所有元素在一行显示（max-content）。

主要 CSS 代码如下：

.container {
    display: grid;
    grid-column-gap: 5px;
    grid-template-columns: repeat(2, min-content auto max-content) auto;
}

2.minmax()函数

minmax(min,max)函数表示当前这个格子的尺寸范围在 min 到 max 之间。

例如：

.container {
    grid-template-columns: repeat(2, minmax(min-content, max-content) 40px) auto;
}

效果如下 GIF 点击播放：

第 1 列和第 3 列的宽度最小是 min-content 对应的宽度，最大是 max-content 对应的宽度。

demo 主要 CSS 代码如下：

.container {
    display: grid;
    grid-column-gap: 5px;
    grid-template-columns: repeat(2, min-content auto max-content) auto;
}

3.fit-content()函数

fit-content()函数是干什么用的呢？

一言以蔽之，尺寸适应于内容，但不超过设定的尺寸。

底层计算公式如下，源自规范文档（MDN 上显示的的是错误的）：

min(minimum, max(limit, max-content))

minimum 并不具体指代某一个对应的参数类型，不等于 min-content 也不等于 auto。究竟是什么意思呢？经过我的研究，啥都不是！或者说，无论是 W3C 官方的公式还是 MDN 上的公式都是会有理解障碍的。

大家请使用下面的公式进行计算吧：

fit-content(limit) = min(min(auto, limit), min(auto, max-content))

其中：

• max-content 就是指 max-content 对应的尺寸，而 auto 就是指 auto 关键字对应的尺寸。
• min()就是 JS 中 Math.min()的意思，取小值。

只看公式会有点懵，不急，实例说话：

.container {
    grid-template-columns: repeat(2, fit-content(100px) 40px) auto;
}

效果如下，依然是我最爱的深天蓝色：

其中，第 1 列和第 3 列应用了 fit-content(100px)。

含义分别如下：

• 第 1 列

3 个中文，min-content 宽度为 1em，14px；max-content 宽度为 3em，42px。

初始状态下，auto 关键字应该显示的宽度远大于 max-content，那么 auto 就用 666px 代替吧。套用公式就是：

fit-content(100px) = min(min(666, 100), min(666, 42)) = 42px
// 最大 max-content 尺寸

随着容器宽度变小，auto 关键字对应的宽度也越来越小，可以一直小到 min-content 宽度，也就是 14px，此时调用公式就是：

fit-content(100px) = min(min(14, 100), min(14, 42)) = 14px
// 小到 min-content 尺寸

• 第 3 列

这一列的中文字符特别的多，max-content 远远大于 100px，我们不妨用一个 666px 代替。

初始状态下，auto 关键字对应的宽度是大于 100px 的，不妨用 233px 代替，因此，此时 fit-content(100px)的尺寸计算值就是限定的 100px 大小：

fit-content(100px) = min(min(233, 100), min(233, 666)) = 100px
// 限定的尺寸

随着容器宽度变小，auto 关键字对应的宽度也越来越小，可以一直小到 min-content 宽度，这里 min-content 的宽度值应该是’100px’这 5 个字符的宽度了，我量了一下，在我的电脑下面是 38 像素。

于是公式用起来：

fit-content(100px) = min(min(38, 100), min(38, 666)) = 38px

得到宽度是 38px。

当然日常平时开发啊，我们不需要套用公式计算它最终显示的值。因为公式虽然复杂，但最终的表现形式用语言描述就非常简单。

尺寸由内容决定，内容越多尺寸越大，但不超过限定的尺寸。

语法

fit-content( [ <length> | <percentage> ] )

只支持长度值和百分比值。

如果重复的数量不确定

以上所有案例展示的都是我们知道列表数目的情况下，如果我们不知道列表数目具体是多少，这个时候我们该如何使用 repeat()函数呢？

CSS 中有两个关键字就是用在这种场景下的，这两个关键字分别是 auto-fill 和 auto-fit。

1.auto-fill

根据 Grid 布局中每一个子项的尺寸自动计算需要填充的数量。

计算规则是，当前列表数量下的总尺寸不会超出 Grid 容器的最大正整数值。

举个例子，有如下 CSS 代码：

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

表示布局究竟有多少列是不确定的，但是每一列的宽度最小是 100px。

效果如下，默认宽度很宽的情况下，最后会有匿名的格子：

随着尺寸变小，列数会跟着动态变化，同时宽度自动填充 Grid 容器（因为设置了 1fr）。

主要 CSS 代码：

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    border: 1px dashed skyblue;
}

当我们使用 auto-fill 自动填充的时候，repeat()函数是不能和 auto 一起使用的，例如下面这种写法是无效的：

.container {
    /* 无效 */
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) auto;
}

但是可以和长度只和百分比值一起使用，例如：

.container {
    /* 有效 */
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) 20%;
}

这样，每一行最后一列的宽度都会是容器的 20%大小，截图示意：

2.auto-fit

auto-fit 和 auto-fill 的行为是相似的，区别在于 auto-fit 会把空的匿名格子进行折叠合并，而这个合并的 0px 大小格子可以认为具有单个格子轨道大小调整的功能，对了，其两侧的格子过道也会合并。

什么意思呢？

在 auto-fill 自动填充的时候，如果 Grid 容器的尺寸特别的宽，则最后会有一些空的格子占位：

但是 auto-fit 自动适应的时候，如果 Grid 容器的尺寸特别的宽，则最后会有一些空的格子会合并成 1 个，且宽度是 0：

也就是 auto-fit 场景下，无论 Grid 容器多宽，子项元素一定是尺寸一定是填满的；当 Grid 容器尺寸没有富余的时候，两者表现又是一样的。

眼见为实，效果对比，代码如下：

.container {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

效果如下：

主要 CSS 代码：

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    border: 1px dashed skyblue;
}

大屏下才能看出和 auto-fill 差异）

实际开发的时候，按照我个人经验，建议使用 auto-fit。

结语

Grid 布局适合方方正正纵横交错的布局，在 IE10 浏览器支持的那一版语法中，Grid 布局的优势其实并不是很明显，其实现的东西基本上都有类似的替代方案，所以，当时我表示内心很平静，没有任何波动。

什么时候开始觉得 Grid 布局还挺屌的呢？

就是浏览器开始纷纷支持 repeat()，minmax()，fit-content()等函数和 auto-fill，auto-fit 等关键字之后，其实现的弹性布局效果是以往没有任何 CSS 属性能够实现的，让 Grid 布局的等级提升了。

然后自己也意识到一个问题，Grid 布局提升并不是我一开始以为的 repeat()函数，更多的是 repeat()函数里面支持的那些关键字和函数，以及整个全新的 CSS 体系。

如果大家的项目对兼容性的要求还没有那么严格，不妨试试使用 Grid 布局的新语法新特性。

特别是那些纵横交错的布局（见下面适合使用 Grid 布局的示意）：

行文不易，做 demo 也不易，GIF 录屏方便大家学习理解更不易。

如果您觉得本文内容不错，欢迎微信群或朋友圈转发，就是对这些“不易”最大的支持。

原文链接：《CSS repeat()函数详细介绍》