CSS Grid 布局是一种强大的网格布局系统，它可以帮助我们快速地构建复杂的布局。在 CSS Grid 布局中，我们可以使用 repeat() 函数来简化网格大小的设置，让我们更加高效地编写代码。
repeat() 函数的语法
repeat() 函数可以让我们重复一个网格轨道的设置。它的语法如下：
repeat(重复次数, 网格大小)
其中，重复次数表示需要重复的次数，网格大小表示每个网格轨道的大小。
使用 repeat() 函数设置网格大小
我们可以使用 repeat() 函数来设置网格大小，如下所示：
grid-template-columns: repeat(3, 100px);
上面的代码表示将网格分成三列，每列的宽度都是 100 像素。
我们也可以使用 repeat() 函数来设置不同的网格大小，如下所示：
grid-template-columns: repeat(3, 100px 50px 200px);
上面的代码表示将网格分成三列，第一列的宽度是 100 像素，第二列的宽度是 50 像素，第三列的宽度是 200 像素。
使用 repeat() 函数设置网格轨道
在 CSS Grid 布局中，我们可以使用网格轨道来定义网格的行或列。我们可以使用 repeat() 函数来设置网格轨道的大小，如下所示：
grid-template-rows: repeat(3, 100px);
上面的代码表示将网格分成三行，每行的高度都是 100 像素。
我们也可以使用 repeat() 函数来设置不同的网格轨道大小，如下所示：
grid-template-rows: repeat(3, 100px 50px 200px);
上面的代码表示将网格分成三行，第一行的高度是 100 像素，第二行的高度是 50 像素，第三行的高度是 200 像素。
使用 repeat() 函数设置网格模板
我们还可以使用 repeat() 函数来设置网格模板，如下所示：
grid-template: repeat(3, 100px) / repeat(3, 1fr);
上面的代码表示将网格分成三行和三列，每行的高度都是 100 像素，每列的宽度都是相等的。
总结
在 CSS Grid 布局中，我们可以使用 repeat() 函数来简化网格大小的设置。通过使用 repeat() 函数，我们可以更加高效地编写代码，同时也可以让我们的代码更加易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fd52b8d10417a2228af944
