Grid中 repeat() 函数的使用

在前端开发中，CSS Grid 是一种强大的布局系统，它允许我们以网格形式组织和排列页面元素。Grid 中的 repeat() 函数是一个非常有用的函数，它允许我们重复定义网格的行或列，以简化代码并提高可维护性。在本文中，我们将探索 CSS Grid repeat() 函数的所有可能性，它允许我们高效地创建 Grid 列和行的模式，甚至无需媒体查询就可以创建响应式布局。

repeat() 函数概述

repeat() 函数是 CSS Grid 中的一个函数，它允许我们重复定义网格的行或列。它的语法如下：

repeat(repeatCount, trackSize)

其中，repeatCount 表示重复的次数，可以是一个正整数或一个关键字 auto-fill 或 auto-fit；trackSize 表示每个重复项的大小，可以是一个长度单位或一个占位符 auto。

使用 repeat() 函数可以大大简化定义网格的代码，特别是当我们需要定义大量相同大小的行或列时。下面我们将通过实例来演示如何使用 repeat() 函数。

不要重复自己

通过 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))

请务必将这行代码牢记于心，因为它会派上大用场。

以上就是本文的全部内容，如果对你有所帮助，欢迎点赞、收藏、转发~