今天为大家讲解一下我最近学的一个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代码：
... //省略11个，自己练习的话写全
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( [ | ] )
只支持长度值和百分比值。
如果重复的数量不确定
以上所有案例展示的都是我们知道列表数目的情况下，如果我们不知道列表数目具体是多少，这个时候我们该如何使用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录屏方便大家学习理解更不易。
如果您觉得本文内容不错，欢迎微信群或朋友圈转发，就是对这些“不易”最大的支持。
2868
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
