不要重复自己在本文中,我们将探索 CSS Grid repeat() 函数的所有可能性,它允许我们高效地创建 Grid 列和行的模式,甚至无需媒体查询就可以创建响应式布局。
通过 grid-template-columns
和 grid-template-rows
属性,我们可以显式地设置网格中的行数和列数,并指定它们的大小。如果我们希望多行和/或多列的大小相同,这可能会变得重复。
repeat()
函数可以将我们从重复中解救出来。举个例子,我们可能会这么写:
(资料图片)
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
使用repeat()
,可以这么写:
grid-template-columns: repeat(5, 1fr);
在上面的例子中,repeat()
函数可以让我们指定需要多少列(5
列),以及列的大小(1fr
,即可用空间的几分之一)。
这样,我们的代码就会更高效、更易读。这只是一个简单的例子。下面我们将看到,我们还可以用 repeat()
函数做很多事情。
下面的截图显示了上述代码的一个简单演示。一篇包含十个 div 的文章分为五列。
repeat函数的的选项实际上,我们可以在 repeat()
的括号内做很多事情。它接收两个参数,中间用逗号隔开。第一个参数代表"计数",第二个参数代表"轨道":repeat(
。(轨道是一列或一行的通用名称)。
第一个参数可以是以下三种之一:
数字(比如1,2,3)auto-fit
关键字auto-fill
关键字显然,数字值设定了特定的轨道数。但是,auto-fit
和auto-fill
可以根据可用空间的大小,设置不同数量的轨道。这使得它们在没有媒体查询的响应式布局中非常方便。下面我们将对它们进行详细介绍。
第二个参数指定了要重复的轨道数。可选值包括:
长度值,可使用单位包括fr、px、em、%和ch等等min-content
关键字max-content
关键字auto
关键字minmax()
函数,其可以嵌套min()
或者max()
函数fit-content()
函数命名线正如你所看到的,这个参数有很多可能的选项,它们看起来可能有点混乱,尤其是当几个选项组合在一起的时候。在此,我们将尽量把事情简单化,以免陷入混乱。在大多数情况下,轨道参数是相当简单和直观的。
设置重复列在探索 repeat()
可以使用的各种参数之前,值得注意的是 repeat()
可以用来创建列模式。
例如,请看下面这段有六列网格的超长代码:
article { grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;}
可以使用repeat()
这么改写:
article { grid-template-columns: repeat(3, 1fr 2fr);}
这会告诉浏览器重复一个模式三次--先是 1fr
宽的一列,然后是 2fr
宽的一列。
我们已经在 repeat()
中使用过 1fr
的长度值。使用 fr
单位的好处是,它可以根据可用空间确定轨道的大小,而无需担心可用空间的多少。不过,我们也可以根据需要使用其他长度单位。
例如,让我们设置三列轨道,并赋予它们 120 像素的宽度:
article { grid-template-columns: repeat(3, 120px);}
下面是结果:
现在列的宽度是固定的,即使容器太窄也不会改变。
使用min-content关键字min-content
关键字可将轨道设置为与其最小内容一样宽或一样高。在下面的演示中,我们有三列,每一列都设置为 min-content
,因此每一列的宽度与其包含的最长单词一样宽:
article { grid-template-columns: repeat(3, min-content);}
使用max-content关键字max-content
关键字的作用基本上与 min-content
相反:它根据网格单元格中最大的内容来确定轨道大小。在下面的演示中,列宽以内容最多的单元格为基础:
article { grid-template-columns: repeat(3, max-content);}
使用auto关键字与 repeat()
一起使用时,auto
关键字的最大值为 max-content
,最小值为 min-content
。
请看下面的列模式:
article { grid-template-columns: repeat(3, auto 1fr);}
在这里,我们将有六列,每一奇数列的宽度设置为 auto
。在下面的演示中,我们可以看到,在有足够空间的情况下,带有"auto"文本的 div 将在max-content
时达到最大宽度,而 1fr
div 则共享剩余空间。当浏览器变窄时,"auto"列继续变窄,直到达到min-content
阈值。
在上面的演示中,只有当每一列达到min-content
阈值时,div 才会开始溢出容器。(也就是说,文本无法再继续被包覆)。
使用minmax()函数注意:
auto
只有在与其他值混合时才会出现上述行为。如果单独使用repeat(3, auto)
,其行为就像我们设置repeat(3, 1fr)
一样。
minmax()
函数本身需要两个参数--最小值和最大值,中间用逗号隔开。因此,通过 minmax()
,我们可以在灵活的环境中为轨道设置一系列可能的尺寸。
例如,我们可以将一列设置为 minmax(40px, 100px)
,这意味着其最小宽度为 40px
,最大宽度为 100px
。
minmax()
的两个参数都可以使用长度值,如 fr、px、em、% 和 ch,以及 min-content
、max-content
和 auto
。不过,最好至少为一个参数使用长度值,因为关键字不应该同时作为两个参数工作(不过我发现有时确实可以这样做,例如 minmax(min-content,max-content)
)。
下面代码设置了五列,每一列的最小宽度为60px
,最大宽度为1fr
:
article { grid-template-columns: repeat(5, minmax(60px, 1fr));}
在达到最小宽度 60px
之前,这种方法一直很有效。之后,内容就会开始脱离容器。我们很快就会看到如何获得更好的效果。
minmax()
函数的参数也可以是 min()
或 max()
函数。这两个函数都接收两个参数。min()
函数应用两个值中较小的值,而 max()
函数应用较大的值。这在响应式环境中非常有用。
比如说:
article { grid-template-columns: repeat(5, minmax(min(60px, 8vw), 1fr));}
上面的代码设置了五列。在宽屏幕浏览器上,五列的间距均为 1fr
。在较窄的设备上,列会越来越窄。一旦达到 60px
和 8vw
之间的较低值,就会停止缩小。因此,在窄屏幕上,我们仍然会发现内容悬挂在容器外;要做到完全响应式,还有很长的路要走。
如果你觉得 minmax()
、min()
和 max()
的组合在现阶段有点令人失望,请坚持住,它们的真正威力将在auto-fit
和auto-fill
时显现。
fit-content()
函数接收一个参数,该参数代表轨道可增长到的最大尺寸。fit-content()
可以接收任何长度值,如 fr、px、em、% 和 ch。
比如说,如果我们设置了三列,并设置了 fit-content(120px)
,那么列宽在 120px
之前都将是响应式的:
article { grid-template-columns: repeat(3, fit-content(120px));}
使用命名线在网格布局中,轨道周围的垂直线和水平线默认是编号的。在设置 grid-template-columns
和 grid-template-rows
时,我们可以为这些线命名。这样,在网格上放置内容时,就可以更容易地定位这些线(因为我们不必去计算网格线)。
下面是一个示例。命名行是方括号([])中的点位:
article { grid-template-columns: [sidebar] 300px [content-start] 1fr [content-end];}
上面的代码提供了两列。最左边的垂直网格线(数字 1)称为"sidebar",中间的网格线(数字 2)称为"content-start",最后的网格线(数字 3)称为 "content-end"。
我们还可以在 repeat()
函数中使用命名线:
article { grid-template-columns: repeat(5, [yin] 1fr [yang]);}
这意味着,现在我们的每一列左边都有一条线称为"yin
",右边都有一条线称为"yang
"。
如果每一行都有相同的名称,似乎会增加工作难度,但我们仍然可以将它们分别作为目标。例如:
我们可以用grid-column: yin
来定位第一条yin
线我们可以用 grid-column: yin 2
来定位第二条yin
线我们可以设置一列从第二条yin
线起跨三行: grid-column: yin 2 / span 3
我们可以通过 grid-column: yin 2 / yang -1
设置一列,从第二条yin
线开始,一直跨到末尾。在 repeat()
中命名线可能在 repeat()
与其他值混合时最有用,比如这样:
article { grid-template-columns: [main-start] auto repeat(5, [yin] 1fr [yang]) [sidebar] 300px [main-end];}
更多的命名线内容可以查看MDN。
使用auto-fit和auto-fillauto-fit
和auto-fill
关键字是设置固定轨道数的替代方法。它们告诉浏览器在给定空间内尽可能多地填充轨道。例如:
article { grid-template-columns: repeat(auto-fit, 150px);}
在上面的演示中,div 的宽度被设置为 150px
,那些无法在一行中显示的 div 会被放到下一行。如果我们将auto-fit
改为auto-fill
,就不会发现有什么不同,因为在这种情况下,它们的作用是一样的。它们之间的区别只有在特殊情况下才会显现出来。
在这一点上,auto-fit
和auto-fill
都还不错,但没有什么特别闪光的地方。当它们与 minmax()
和 min()
结合使用时,真正的魔力才会开始发生,所以我们接着往下看。
如果你还没有爱上 repeat()
,那么 repeat()
与 auto-fit
、minmax()
和 min()
的结合一定会让丘比特之箭射穿你顽固的心。通过它们的组合,我们无需使用媒体查询即可创建真正的响应式布局。
请看下列CSS:
article { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));}
在当前示例中,minmax()
设置了最大列宽为200px
,最小列宽为1fr
。
每个 div 的宽度必须至少为 200px
。如果右侧有额外空间(小于 200 像素),div 会展开以填充空间。如果我们拓宽浏览器,一旦又有 200 像素的空间,就会在行中添加另一个 div。同样的情况也会反过来发生:当我们缩小浏览器时,一旦没有至少 200px
的空间可以容纳,行中的最后一个 div 就会进入下一行。一旦该 div 掉下去,其余的 div 就会展开以填满该行。
同样,如果我们把auto-fit
换成auto-fill
,就会看到相同的行为。
不过,这个例子有一个限制。如果我们将浏览器窗口设置得足够窄,最终就会出现单列。当这一列的宽度小于 200px
时,div 就会开始溢出其容器。
我们可以通过引入 min()
来防止溢出,接下来我们就来看看它。
我们可以通过引入 min()
来控制小宽度下的情况。让我们更新代码,使其看起来像这样:
article { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));}
现在,最小列宽有两个选项。浏览器会选择最小值。一旦列的宽度小于 200px
,100%
就是较小的值,因此以它为准。这意味着剩下的一列现在被设置为宽度:100%,因此在宽度不断减小的情况下,它仍能很好地适应其容器。
在我们目前看到的示例中,auto-fit
和auto-fill
似乎没有任何区别。区别只出现在某些情况下,我们现在就来简单介绍一下。
我们将剥离演示 HTML,使其只有四个 div,并设置以下 CSS:
article { grid-template-columns: repeat(auto-fill, minmax(min(100px, 100%), 1fr));}
下图显示了auto-fill
后的效果。
浏览器正在计算容器中可以容纳多少个 div,并为它们留出空间。现有的每个 div 都有 110px
宽,左侧和右侧的空间也是如此。
让我们切换到auto-fit
:
article { grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr));}
下图显示了auto-fit
后的效果。
使用auto-fit
功能时,浏览器也会为更多的 div 计算空间,但随后会将空间折叠为零宽度,并让现有的 div 展开以占据所有空间。在上图中,你可以看到末端列行的编号仍然是 8,而 8 则堆叠在网格行 7、6 和 5 的上方。
那么我们该如何看待这一切呢?实际上,在大多数甚至所有情况下,我们都希望使用auto-fit
功能,因为我们并不经常希望在可以用于内容的空间保持空闲。
如上所述,repeat()
函数可与 grid-template-columns
和 grid-template-rows
一起作为较长声明的一部分使用。我们在这里遇到的大多数朋友--长度单位、min-content
、max-content
、auto
、minmax()
、fit-content()
和命名线--都可以与 repeat()
一起使用,也可以在其中使用。
有些组合是不允许使用轨迹参数的。例如,我们不能使用 repeat(auto-fill, 1fr)
这样的参数。auto-fit
和弹性单位不能一起使用,因为我们需要在其中某个地方使用固定的测量值,例如 minmax(100px, 1fr)
。
正如我们所见,minmax()
函数可以嵌套 min()
或 max()
函数。它还可以包含 auto
、min-content
、max-content
中的一个,但不能包含两个。例如,我们可以使用 minmax(50px, max-content)
,但不能使用 minmax(min-content, max-content)
(不过老实说,我发现这些组合中的某些似乎确实有效)。
repeat()
不能嵌套。因此,我们不能在 repeat()
中使用 repeat()
。不过我们并排使用 repeat()
函数,例如 repeat(5, 1fr) 100px repeat(2, 50px)
。
repeat()
函数是一种非常有用的工具,可用于高效布局网格列和行的重复模式。只需一行代码,它就能在不使用媒体查询的情况下创建完全响应式的布局。
在大多数情况下,你不需要对 repeat()
进行过多的深入研究。它最令人印象深刻的功能可以用这样一个基本示例来概括:
repeat(auto-fit, minmax(min(50px, 100%), 1fr))
请务必将这行代码牢记于心,因为它会派上大用场。
以上就是本文的全部内容,如果对你有所帮助,欢迎点赞、收藏、转发~
关键词:
凡注有"星岛中文网"或电头为"星岛中文网"的稿件,均为星岛中文网独家版权所有,未经许可不得转载或镜像;授权转载必须注明来源为"星岛中文网",并保留"星岛中文网"的电头。
精选 导读
女子穿高跟鞋单脚站立上演“练瑜伽式”骑车 交通
道路千万条,安全第一条。11月4日,有网友在广州的路上拍到惊人一幕。只见一位女子在花都地铁广场站迎宾大道马路上大秀车技,穿高跟鞋单脚
山东女子忘拉手刹致溜车 竟徒手将车推了回去
近日,山东女子忘拉手刹致溜车,徒手推回SUV的视频在网上热传,网友调侃:谁还敢惹女司机。据报道,11月4日,山东临沂一女子停车去开铁门,
济宁一小伙边骑电动车边双手玩手机 车头疯狂摆动
11月5日,山东济宁一年轻小伙一边骑电动车,一边低头双手玩手机,所幸路过司机好心提醒。视频中,这名小伙驾驶一辆两轮电动车,双手完全脱
浙江台州出现不明飞行物 空中出现多个亮点 专家
据报道,7月26日,有多名浙江台州网友发视频称,在空中看到不明飞行物,当时空中出现了多个亮点,排在一条直线上。网传视频中,这几个明亮
离谱!潮州一女孩从古茗奶茶喝出一只壁虎 还从嘴
喝奶茶喝出一只壁虎,而且还是从嘴里给拽了出来,这画面实在是太让人无法直视。据信号财经报道,7月26日,广东潮州,女孩称在古茗奶茶内喝