如何使用CSS网格重复（）函数

在本文中，我们将探讨CSS GRID重复（）函数的所有可能性，这使我们能够有效地创建网格列和行的模式，甚至可以在没有媒体查询的情况下创建响应式布局。

钥匙要点

'repot（）`函数简化了网格模式的创建，允许以简洁的方式规范列或行及其大小的规格，从而增强代码可读性和效率。

>
• >它支持各种尺寸选项，例如固定长度（`px`，'em`，`％`，`fr'），基于内容的关键字（``min-content'，'max-content'）和灵活性`自动`关键字，在响应式设计中提供多功能性。
• >该功能可以与``auto-fit''和`auto-fill'关键字集成，以自动根据容器的宽度调整网格轨道的数量，这对于创建没有媒体查询的流体，响应的布局至关重要。
>利用`minmax（）`in repoy（）`提供了一种强大的方法来定义轨道大小的范围，从而确保内容在不同的视口尺寸上平稳地适应。>
• 可以在“ repot（）”中定义
命名线，在网格项目的精确放置中有助于，并增强网格结构的可维护性。>
• `repot（）`不能嵌套在自身中，但是可以与其他值和功能一起使用，以有效地创建复杂和响应的网格布局。
>
不要重复（）自己
网格板柱和网格板行属性允许我们在网格中明确设置所需的行和列的数量，并指定应如何尺寸。如果我们希望以相同的方式进行多个行和/或列的大小，这可能会变得重复。

重复（）函数可以使我们不必重复自己。例如，我们可能会发现自己在写这篇文章：

，我们可以写下：

>

在上面的示例中，repot（）函数使我们可以指定我们想要多少列（5），以及它们都应该是什么大小（1fr-或可用空间的一小部分）。

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

>这使我们的代码更有效，更易于阅读。这只是一个简单的例子。正如我们将在下面看到的那样，Repoy（）函数还可以做更多的事情。

>

<span>grid-template-columns: repeat(5, 1fr);
</span>

以下笔显示了上面代码的简单演示。包含十个Divs的文章被组织成五列。

看到笔 CSS网格重复（）：5个简单的列，由sitepoint（@sitepoint） 在Codepen上。

上面的演示使用CSS GAP属性。要了解有关网格布局的更多信息，请查看我们的CSS网格初学者指南。 >重复（）函数的选项

>我们实际上可以在retover（）的括号内做很多事情。它需要两个论点，被逗号分开。第一个表示“计数”，第二个表示“轨道”：重复（，）。 （“轨道”一词是列或一行的通用名称。）

>

计数参数可能是三件事之一：>

一个数字（例如1，2，3）

自动拟合关键字
自动填充关键字
• 显然，一个数值设置了特定数量的轨道。但是自动拟合和自动填充允许根据可用空间进行不同的轨道。这使他们非常方便响应迅速的布局而无需媒体查询。我们将在下面详细探讨它们。

曲目参数指定将要重复的曲目。这些是此参数的选择：

一个长度值，使用诸如FR，PX，EM，％和CH

之类的单元

最小关键的关键字
最大关键关键字
自动关键字
minmax（）函数，该函数本身可以具有嵌套的min（）或max（）函数
• >
fit-content（）函数
>命名lines
如您所见，此参数有很多可能的选择，并且它们可能会开始看起来有些混乱，尤其是当其中几个组合时。我们将尝试在这里保持相当简单，以免杂草迷失。在大多数情况下，曲目的论点相当简单且直观。
• >
>设置重复（）

>的列组组

>在我们探索可以与重复（）一起使用的各种参数之前，值得注意的是，重复（）可用于创建列的模式。> 例如，考虑六列网格的此“长手”代码：

我们可以像这样重写，使用重复（）：

>这告诉浏览器重复三次模式 - 宽列宽，然后是2FR列宽。下面的演示显示了这一点。

>

看到笔 CSS网格重复（）：sitePoint（@sitepoint）的列模式 在Codepen上。

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

使用重复（）

的长度值

<span>grid-template-columns: repeat(5, 1fr);
</span>

>我们已经看到了与重复（）一起使用的1FR的长度值。 FR单元的优点是，它根据可用空间的尺寸尺寸，而不必担心可用的空间。但是我们也可以在需要的地方使用其他长度单元。

例如，让我们设置三个列轨道，并给它们宽度为120像素：

>

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

以下codepen演示显示结果。

看到笔 CSS网格重复（）：sitepoint（@sitepoint）的长度值 在Codepen上。

>列现在具有固定宽度，即使容器太窄，也不会更改。尝试在上面的笔中使用浏览器宽度播放。还可以尝试将像素交换为其他长度单元，例如5em，10CH，15％等，以查看其效果。

使用repot（）

的min-content关键字

最小的关键字将轨道设置为仅与最低内容一样宽或高。在下面的演示中，我们有三列，每列都设置为最符号，因此每个列与其中包含的最长单词一样宽：

<span>grid-template-columns: repeat(5, 1fr);
</span>

看到笔 CSS网格重复（）：按sitepoint（@sitepoint）的最小内容 在Codepen上。

使用重复（）

的Max-Content关键字

最大包含关键字基本上是对最小内容的相反：它将轨道大小基于网格单元格中最大量的内容。在下面的演示中，列宽度基于最大含量的单元格：>

<span>article {
</span>  <span>grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
</span><span>}
</span>

看到笔 CSS网格重复（）：按sitePoint（@sitepoint）最大包含 在Codepen上。

使用重复（）

的自动关键字

与重复（）一起使用时，自动关键字最大值以最大包含，并以最小符号为单位。

考虑以下列的模式：

<span>article {
</span>  <span>grid-template-columns: repeat(3, 1fr 2fr);
</span><span>}
</span>

>在这里，我们将有六列，每列奇数固定为自动的宽度。在下面的Codepen演示中，我们可以看到，在有足够的空间的情况下，具有“自动”文本最大值的DIV在Max-Content处出现，而1FR Divs共享剩余的空间。随着浏览器的缩小，自动列继续变得更窄，直到达到最小的阈值。

。

看到笔 CSS网格重复（）：由sitePoint（@sitepoint）自动 在Codepen上。

在上面的演示中，一旦每列达到其最小的阈值，DIVS才会开始溢出容器。 （也就是说，文本无法再包装。）>

>

注意：自动似乎只有上述与其他值混合时的行为。它自己（例如重复（3，auto））的行为就像我们设置重复（3，1fr）一样。 使用minmax（）函数与重复（） 例如，我们可以将列设置为Minmax（40px，100px），这意味着其最小宽度为40px，其最大可能宽度为100px。 Minmax（）的两个参数都可以采用诸如FR，PX，EM，％和CH的长度值，以及Min-Content，Max-Content和Auto。但是，最好将长度值用于至少一个参数，因为关键字不应该用作两个参数（尽管我发现这有时确实有效，例如minmax（minmax（min-content，max-content））。

以下代码设置了五列，每个列的最小宽度为60px，最大宽度为1FR：>

看到笔 CSS网格重复（）：sitepoint（@sitepoint） 在Codepen上。

>这效果很好，直到达到60px的最小宽度为止。在此之后，内容开始闲逛的容器。我们将看到如何尽快获得更好的结果。

>

使用min（）或max（）

>使用minmax（）函数

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

minmax（）函数也可以作为参数具有min（）或max（）函数。这两个都有两个值。 min（）函数应用于其两个值中的较小，而max（）函数应用于较大的值。这在响应环境中很有用。

例如：

看到笔 CSS网格重复（）：minmax（）函数，sitepoint（@sitepoint），用min（）函数 在Codepen上。

上面的代码设置了五列。在宽阔的浏览器上，这五列将在1FR处均等。在较窄的设备上，这些列会变得越来越窄。一旦击中60px和8vw的下部，他们就会停止收缩。因此，我们仍然可以发现自己的内容悬挂在狭窄屏幕上的容器上；还有进一步的响应能力。

>如果您发现Minmax（），Min（）和Max（）的组合在此阶段有些不知所措，请挂在那里，因为当我们遇到Auto-Fit和Auto-auto-auto-auto-填充。

使用fit-content（）函数与重复（）

fit-content（）函数采用一个参数，该参数表示轨道可以增长的最大尺寸。因此，直到那个点，轨道可以灵活。 FIT-CONTENT（）可以采用任何长度值，例如FR，PX，EM，％和Ch。

例如，如果我们设置三个列和拟合（120px），则该列宽度将响应起来，直到宽度为120px：>

看到笔 CSS网格重复（）：fit-content（）by sitepoint（@sitepoint） 在Codepen上。

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

使用重复（）的命名行

在网格布局中，默认情况下，轨道周围的垂直线和水平线编号。在设置网格 - 板块柱和网格板行时，我们可以为这些行命名。这使得将内容放在网格上时更容易定位这些行（因为我们不必进入并计算网格线）。

这是一个简单的例子。命名的线是方括号中的位（[]）：

>

上面的代码为我们提供了两列。最左侧的垂直网格线（数字1）称为“侧栏”，中间网格线（数字2）称为“ content-start”，最终网格线（数字3）称为“内容端”。

<span>grid-template-columns: repeat(5, 1fr);
</span>

>我们还可以在我们的repot（）函数中使用命名线：>

>这意味着我们的每个列现在都有一条左侧的线，称为Yin，右侧的线称为Yang。

<span>article {
</span>  <span>grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
</span><span>}
</span>

如果每行具有相同的名字，

>似乎会使生活更加困难，但是我们仍然可以单独定位它们。例如：

我们可以用网格列来瞄准第一条阴线：yin

我们可以用网格列来瞄准第二个阴线：yin 2

>
• 我们可以将列设置为从第二个阴线跨越三行：网格列：yin 2 / span 3
• 我们可以将列设置为从第二个阴到末端的列以网格列的跨度：yin 2 / yang -1
在重复（）与其他值混合的情况下，重复（）中的命名线可能是最有用的，例如：
• >

>我不会进一步研究命名的线条以及如何在这里使用它们，因为这是一个单独的主题，但是您可以在MDN上阅读有关命名网格线的更多信息。

使用自动拟合和自动填充

使用重复（）

>自动拟合和自动填充关键字是设置固定数量轨道的替代方法。他们告诉浏览器将尽可能多的曲目适合给定空间。例如：

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

看到笔 CSS电网重复（）：自动拟合和自动填充站点点（@sitepoint） 在Codepen上。

在上面的演示中，DIVS设置为150px的宽度，而那些不能适合一行的divs降至下一行。如果我们将自动拟合更改为自动填充，我们将不会看到差异，因为在这些条件下，他们都做同样的事情。它们之间的差异只有在特殊情况下才会显而易见。

在这一点上，自动填充的自动填充是

好，但没有什么特别的闪光。当他们与minmax（）和min（）结合在一起时，真正的魔术开始发生，所以让我们看看接下来的那个。>

与自动拟合/自动填充，minmax（）和min（）

>使用重复（）

>如果您不爱上repot（），那么repot（）与自动拟合，minmax（）和min（）的组合肯定会看到丘比特的箭头刺穿您的顽固的心。它们的组合使我们可以在不使用媒体查询的情况下创建真正的响应式布局。

>

使用auto-fit和minmax（）与重复（）

考虑以下CSS：

在此示例中，Minmax（）将最小列宽度设置为200px，最大为1FR。下面的演示显示了这一点。

<span>grid-template-columns: repeat(5, 1fr);
</span>

>

看到笔 CSS网格重复（）：sitepoint（@sitepoint）的自动拟合和minmax（） 在Codepen上。

每个DIV必须至少为200px宽。如果右边有额外的空间（少于200像素），则DIVS扩展以填补空间。如果我们扩展了浏览器，则一旦有200个空间像素可用，将添加另一个DIV。相反的情况也是如此：当我们缩小浏览器范围时，一旦没有至少200px的空间才能适合该行，该行中的最后一个div将会下降。一旦掉落，其余的Divs扩展以填充行。> 再次，如果我们将自动拟合交换为自动填充，我们将看到相同的行为。 不过，这个示例有一个限制。如果我们使浏览器窗口足够狭窄，则最终将获得一个列。由于该列的狭窄大于200px，因此DIVS将开始溢出其容器。

>我们可以通过将Min（）（）加入混合物来防止这种溢出发生，所以让我们看看下一个溢出。

使用auto-fit，minmax（）和min（）与重复（）

我们可以通过引入min（）来控制小宽度的情况。让我们更新我们的代码以使其看起来像：

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

现在有两个选项可用于最小列宽度。浏览器将选择最小的

>。一旦列窄，大于200px，则100％是较小的值，因此它占了上风。这意味着现在剩余的列现在设置为宽度：100％，因此它将继续以宽度较小的宽度良好地融入其容器中。 （将浏览器窗口向下挤压，以便在实践中看到它。 看到笔 CSS网格重复（）：minmax（）和min（）sitepoint（@sitepoint） 在Codepen上。

>有关使用自动拟合，minmax（）和min（）使用重复（）的更真实的演示，请查看响应式图像库的以下Codepen演示。该演示还利用了aptive-ratio属性，我们在如何使用css axpect-ratio中介绍了该属性。

> 看到笔 使用sitepoint（@sitepoint）使用aptive-ratio的响应式图像库 在Codepen上。

了解自动拟合和自动填充

之间的差异

在我们到目前为止看到的示例中，自动拟合和自动填充之间似乎没有任何区别。差异仅出现在某些情况下，我们现在将简要介绍。>

>我们会剥离演示html，以便只有四个Divs，并设置以下CSS：>

下面的图片显示了我们使用自动填充的内容。

<span>grid-template-columns: repeat(5, 1fr);
</span>

浏览器正在计算有多少个Divs

可以

适合容器，并为其留出空间。每个现有的Divs都是110px宽，右侧的空间也是如此。 >让我们切换到自动拟合：

下图显示了我们使用自动拟合所获得的。

<span>article {
</span>  <span>grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
</span><span>}
</span>

使用自动拟合，浏览器还计算出更多DIVS的空间，但随后将该空间倒入零宽度，并让现有DIVS扩展以占用所有空间。在上图中，您可以看到末端列线仍然编号8。8个堆叠在网格第7、6和5号上方。

>那么，我们要做什么？实际上，在大多数情况下，我们将要使用自动拟合，因为当我们可以将其用于我们的内容时，我们通常不希望空间保持空空间。

>

>您可以在此Codepen演示中使用自动拟合和自动填充。尝试将自动拟合更改为自动填充，并扩大和收缩浏览器，以了解它们的行为。

>

关于重复（）

的有用的知识

>如上所述，重复（）函数可以用作带有网格 - 板块柱和网格板行的更长声明的一部分。我们在这里遇到的大多数朋友 - 长度单元，最小单位，最大包含，自动，minmax（），fit-content（）和命名的行 - 与重复（）以及内部一起工作。 （您可以看到它们与MDN上的网格板柱和网格 - 板行一起工作的示例。）

不允许某些组合进行曲目参数。例如，我们不能使用诸如重复（自动填充，1FR）之类的东西。自动拟合和灵活的单元无法一起玩，因为我们需要在某个地方进行固定的措施，例如Minmax（100px，1FR）。 如我们所见，MinMax（）函数可以具有嵌套的min（）或max（）函数。它还可以包含一个自动，最小，最大包含的之一，而不是两个。例如，我们可以使用minmax（50px，最大包含），但不能使用minmax（最小的，最大包含）（尽管老实说，我发现其中一些组合

> do

>无论如何似乎都起作用）。

重复（）符号无法嵌套。因此，我们在重复（）中无法重复（）。但是我们当然可以并排重复（）函数 - 例如重复（5，1fr）100px重复（2，50px）。 总结

重复（）函数是一种非常有用的工具，用于有效地列出网格柱和行的重复模式。它可用于创建完全响应的布局，而无需仅在一行代码中进行媒体查询。 在大多数情况下，您无需重复（）就不会在杂草中降得太远。它最令人印象深刻的功能是在这样的基本示例中总结的：

>

>确保将该代码线保持在您的后袋中，因为它非常方便。

您可以在此处了解有关重复（）函数的更多信息：

>

MDN

<span>grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
</span>

上的重复（）页面 W3C网格布局模块规范的重复（）部分

有关CSS网格布局的更一般介绍，请参见CSS网格布局的介绍。

经常询问有关CSS网格重复功能>使用重复函数和手动指定CSS网格中的网格轨道有什么区别？

> CSS网格中的重复函数是用于定义相同大小的多个网格轨道的简写方法。您可以使用重复功能来定义轨道数及其大小，而不是手动指定每个轨道。这使您的代码清洁器易于阅读。例如，您可以简单地编写“网格 - 板块柱：重复（4，100px）;”，而不是编写“ Grid-Template-Collumns：100px 100px 100px 100px;”。这两个代码都将创建一个带有100px宽度的四个列的网格。

我可以使用具有不同轨道尺寸的重复功能吗？

是的，您可以使用具有不同轨道尺寸的重复功能。重复功能接受两个参数：重复数量和轨道大小。如果要创建带有不同尺寸的轨道的网格，则可以在同一属性中多次使用重复功能。例如，“网格板柱：重复（2，100px）重复（3，200px）；”将创建一个带有两个列的100px和200px的三列的网格。

>自动填充关键字如何与重复函数一起使用？

>自动填充关键字与重复一起使用功能可以自动用尽可能多的轨道填充网格容器。轨道的大小指定为重复函数的第二个参数。如果容器的大小超过轨道的总尺寸，则剩余空间将在轨道之间平均分布。例如，“网格板柱：重复（自动填充，100px）；”可以在容器中创建尽可能多的100px列。

>

>我可以将重复函数与分数单元（fr）？

>是的，可以使用分数单元（ fr）。 FR单元代表网格容器中可用空间的一小部分。例如，“网格板柱：重复（3，1fr）；”将创建一个带有三个列的网格，每个列占该集装箱宽度的三分之一。

>

>自动拟合关键字如何与重复函数一起使用？使用重复函数来创建响应式网格布局。它的工作原理与自动填充类似，但折叠了任何空的轨道。这意味着，如果没有足够的内容来填充所有轨道，则其余的轨道将扩展以占用可用空间。例如，“网格板柱：重复（自动拟合，minmax（100px，1fr））；”将在容器中创建尽可能多的100px列，任何其余空间都将分布在列之间。

>我可以将重复函数与minmax函数一起使用吗？ MinMax函数定义了大于或等于最小值或小于或等于最大值的尺寸范围。例如，“网格板柱：重复（3，minmax（100px，1fr））；”将创建一个带有三个列的网格，每个列的最小宽度为100px，最大宽度为1fr。

如果我使用负数的重复函数会发生什么？重复功能带有负数，浏览器将忽略规则，并且不会创建网格。重复函数仅接受正整数作为重复的数量。

>我可以使用具有百分比值的重复函数吗？

是的，您可以使用具有百分比值的重复函数。该百分比是根据网格容器的尺寸计算的。例如，“网格板柱：重复（2，50％）；”将创建一个带有两个列的网格，每个列占容器宽度的一半。

我可以将重复函数与网格 - 板板行属性一起使用吗？与网格板行属性一起使用以定义网格行的大小。语法与网格板列相同。例如，“网格 - 板行：重复（3，100px）；”可以创建一个带有100px高度的三行的网格。

>我可以将重复函数与媒体查询一起使用吗？

是的，可以将重复函数用于媒体查询以创建响应网格布局。您可以使用媒体查询中的重复功能为不同的屏幕尺寸定义不同的网格布局。例如，您可能需要在小屏幕上显示两个列，并在大屏幕上显示四列。这可以通过以下代码来实现：

@media（max-width：600px）{

.grid {

grid-template-columns：重复（2，1fr） >}

@media（min-width：601px）{

.grid { grid-grid-template-columns：repot（4，1fr）; }

}

}

>

以上是如何使用CSS网格重复（）函数的详细内容。更多信息请关注PHP中文网其他相关文章！