网格 CSS 重复函数创建超过指定的列

Question

所以我正在练习 CSS 网格并且正在学习“repeat()”函数。有问题的代码是：grid-template-columns: repeat(2, 20px 50px)

在解释中说“此代码将创建四列，其中第一列和第三列的宽度为 20 像素，第二列和第四列的宽度为 50 像素。”但我认为它只会创建 2 列，因为我们在函数中只指定了“2”？

Answer 1

一些 CSS 网格教程介绍了 repeat() 作为编写更简洁 CSS 规则的快速方法。因此，例如，而不是键入：
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

使用repeat()函数：
grid-template-columns: repeat(5, 1fr);

那么发生了什么......在repeat()函数中，第一个值定义了重复次数；第二个值定义将重复的内容。

让我们从你的例子逆向计算：
grid-template-columns: repeat(2, 20px 50px);

您有一个 20px 50px 结构（两列），并且您已将其设置为重复 2 次。这是一个 two-column 结构 两次 ，因此 4。重复 3 次将是 6 列，4 次将是 8 列，依此类推。

物有所值。这些声明是相同的： grid-template-columns: repeat(2, 20px 50px); grid-template-columns: 20px 50px 20px 50px;

Answer 2

repeat(numberOfRepetitions, columnOrRowDefinitions) 函数有两个参数：

1. numberOfRepetitions 告诉浏览器您希望第二个参数重复的频率。

2. columnOrRowDefinitions 告诉浏览器要重复哪些列或行定义。

让我们看看您提供的参数：

numberOfRepetitions: 2 // 你要求重复两次。
columnOrRowDefinitions: 20px 50px // 那已经是两个 rows/columns.