Repeat() 是一种表示法,您可以将其与 grid-template-columns
和 grid-template-rows
属性一起使用,以使您的规则在创建大量列或行。
例如,假设我们有一个网格容器的定义:
.container { display: grid; grid-gap: 10px 15px; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: 100px auto 20% 100px auto 20px; }
我们可以像这样使用 repeat() 符号来简化:
.container { display: grid; grid-gap: 10px 15px; grid-template-columns: repeat(3, 1fr 2fr); grid-template-rows: repeat(2, 100px auto 20%); }
传递给 repeat() 的第一个值是重复次数,第二个值是要重复的网格轨迹。
带有命名行的重复()
您还可以对命名行使用重复:
.container { display: grid; grid-auto-flow: column dense; grid-template-columns: repeat(4, [col] 1fr); grid-template-rows: repeat(5, [row] 150px); }
这等效于以下长格式定义:
.container { display: grid; grid-auto-flow: column dense; grid-template-columns: [col] 1fr [col] 1fr [col] 1fr [col] 1fr; grid-template-rows: [row] 150px [row] 150px [row] 150px [row] 150px [row] 150px; }
重复符号末尾的命名网格线最终与下一个起始名称线共享同一条线。 例如,这样:
.container { display: grid; grid-auto-flow: column dense; grid-template-columns: repeat(4, [col-start] 1fr [col-end]); grid-template-rows: repeat(5, [row-start] 150px [row-end]); }
我们得到这个等价的长格式定义:
.container { display: grid; grid-auto-flow: column dense; grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr [col-end]; grid-template-rows: [row-start] 150px [row-end row-start] 150px [row-end row-start] 150px [row-end row-start] 150px [row-end row-start] 150px [row-end]; }