Repeat()是一种符号，您可以将其与grid-模板-Columns和grid-模板-rows属性一起使用，以使您的规则在创建大量列或行时更加简洁和易于理解。

例如，假设我们有一个栅格容器的定义：

1.container {
2  display: grid;
3  grid-gap: 10px 15px;
4
5  grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
6  grid-template-rows: 100px auto 20% 100px auto 20px;
7}

我们可以使用下面这样的Repeat()表示法来简化：

1.container {
2  display: grid;
3  grid-gap: 10px 15px;
4
5  grid-template-columns: repeat(3, 1fr 2fr);
6  grid-template-rows: repeat(2, 100px auto 20%);
7}

传递给Repeat()的第一个值是重复次数，第二个值是要重复的栅格轨迹。

对命名行重复()

您还可以对命名行使用重复：

1.container {
2  display: grid;
3  grid-auto-flow: column dense;
4
5  grid-template-columns: repeat(4, [col] 1fr);
6  grid-template-rows: repeat(5, [row] 150px);
7}

这相当于下面的详细定义：

 1.container {
 2  display: grid;
 3  grid-auto-flow: column dense;
 4
 5  grid-template-columns:
 6    [col] 1fr
 7    [col] 1fr
 8    [col] 1fr
 9    [col] 1fr;
10  grid-template-rows:
11    [row] 150px
12    [row] 150px
13    [row] 150px
14    [row] 150px
15    [row] 150px;
16}

重复符号结尾处的命名网格线将与下一个起始名称行共享同一行。例如，使用以下命令：

1.container {
2  display: grid;
3  grid-auto-flow: column dense;
4
5  grid-template-columns: repeat(4, [col-start] 1fr [col-end]);
6  grid-template-rows: repeat(5, [row-start] 150px [row-end]);
7}

我们得到了这个等价的长式定义：

 1.container {
 2  display: grid;
 3  grid-auto-flow: column dense;
 4
 5  grid-template-columns:
 6    [col-start] 1fr
 7    [col-end col-start] 1fr
 8    [col-end col-start] 1fr
 9    [col-end col-start] 1fr [col-end];
10
11  grid-template-rows:
12    [row-start] 150px
13    [row-end row-start] 150px
14    [row-end row-start] 150px
15    [row-end row-start] 150px
16    [row-end row-start] 150px [row-end];
17}

CSS 网格布局：重复符号

对命名行重复()

See So