共计 6398 个字符,预计需要花费 16 分钟才能阅读完成。
在本文中,咱们将摸索 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(<count>, <tracks>)
。(轨道是一列或一行的通用名称)。
第一个参数能够是以下三种之一:
- 数字(比方 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 才会开始溢出容器。(也就是说,文本无奈再持续被包覆)。
留神:
auto
只有在与其余值混合时才会呈现上述行为。如果独自应用repeat(3, auto)
,其行为就像咱们设置repeat(3, 1fr)
一样。
应用 minmax()函数
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
之前,这种办法始终很无效。之后,内容就会开始脱离容器。咱们很快就会看到如何取得更好的成果。
应用 min()或者 max()
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()
函数接管一个参数,该参数代表轨道可增长到的最大尺寸。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-fill
auto-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()
的联合肯定会让丘比特之箭射穿你固执的心。通过它们的组合,咱们无需应用媒体查问即可创立真正的响应式布局。
应用 auto-fit 和 minmax()
请看下列 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()
来避免溢出,接下来咱们就来看看它。
应用 auto-fit,minmax()和 min()
咱们能够通过引入 min()
来管制小宽度下的状况。让咱们更新代码,使其看起来像这样:
article {grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
当初,最小列宽有两个选项。浏览器会抉择最小值。一旦列的宽度小于 200px
,100%
就是较小的值,因而以它为准。这意味着剩下的一列当初被设置为宽度:100%,因而在宽度一直减小的状况下,它仍能很好地适应其容器。
auto-fit 和 auto-fill 的区别
在咱们目前看到的示例中,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() 的实用常识
如上所述,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))
请务必将这行代码牢记于心,因为它会派上大用场。
以上就是本文的全部内容,如果对你有所帮忙,欢送点赞、珍藏、转发~