1. Web
  2. CSS
  3. repeat()

repeat()

Baseline 已广泛支持

此特性已经十分成熟，可在许多设备和浏览器版本上使用。自 2020 年 7 月以来，它已在各大浏览器中可用。

repeat() CSS 函数表示轨道列表的重复片段，允许以更紧凑的形式书写大量具有重复模式的列或行。

试一试

grid-template-columns: repeat(2, 60px);

grid-template-columns: 1fr repeat(2, 60px);

grid-template-columns: repeat(2, 20px 1fr);

grid-template-columns: repeat(auto-fill, 40px);

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 220px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

此函数可用于 CSS 网格属性 grid-template-columns 和 grid-template-rows。

语法

css
/* <track-repeat> values */
repeat(4, 1fr)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] 1fr [col-end])
repeat(4, [col-start] min-content [col-end])
repeat(4, [col-start] max-content [col-end])
repeat(4, [col-start] auto [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
repeat(4, [col-start] min-content [col-middle] max-content [col-end])

/* <auto-repeat> values */
repeat(auto-fill, 250px)
repeat(auto-fit, 250px)
repeat(auto-fill, [col-start] 250px [col-end])
repeat(auto-fit, [col-start] 250px [col-end])
repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])

/* <fixed-repeat> values */
repeat(4, 250px)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])

repeat() 函数接受两个参数

  • 重复次数：第一个参数指定轨道列表应重复的次数。它由一个大于等于 1 的整数值，或关键字值 auto-fill 或 auto-fit 指定。这些关键字值会重复轨道集，次数为填充网格容器所需的次数。
  • 轨道：第二个参数指定将被重复的轨道集。这基本上由一个或多个值组成，每个值代表该轨道的大小。每个大小都使用 <track-size> 值或 <fixed-size> 值来指定。你还可以在每个轨道前后指定一个或多个网格线名称，方法是在轨道大小前后提供 <line-names> 值。

如果你使用 auto-fill 或 auto-fit 来设置重复次数，则只能使用 <fixed-size> 类型指定轨道大小，而不能使用 <track-size> 类型。这就得到了 repeat() 的三种主要语法形式

  • <track-repeat>，使用
    • 一个整数来设置重复次数
    • 使用 <track-size> 值设置轨道大小。
  • <auto-repeat>，使用
  • <fixed-repeat>，使用
    • 一个整数来设置重复次数
    • 使用 <fixed-size> 值设置轨道大小。

然后，如果一个属性声明使用了 <auto-repeat>，那么对于任何其他的 repeat() 调用，它只允许使用 <fixed-repeat>。例如，下面的写法是无效的，因为它将 <auto-repeat> 形式与 <track-repeat> 形式结合了起来

css
.wrapper {
  grid-template-columns:
    repeat(auto-fill, 10px)
    repeat(2, minmax(min-content, max-content));
}

还有第四种形式，<name-repeat>，用于向子网格添加网格线名称。它只与 subgrid 关键字一起使用，并且只指定网格线名称，不指定轨道大小。

值

<fixed-size>

以下形式之一

<flex>

一个非负的、单位为 fr 的尺寸，指定轨道的弹性系数。每个 <flex> 大小的轨道将按其弹性系数的比例分享剩余空间。

<length>

一个正整数长度。

<line-names>

零个或多个 <custom-ident> 值，以空格分隔并用方括号括起来，如：[first header-start]。

<percentage>

一个非负百分比，对于列网格轨道，是相对于网格容器的内联尺寸；对于行网格轨道，是相对于网格容器的块级尺寸。如果网格容器的尺寸取决于其轨道的尺寸，那么 <percentage> 必须被视为 auto。用户代理可以调整轨道对网格容器尺寸的固有尺寸贡献，并通过能满足该百分比的最小量来增加轨道的最终尺寸。

<track-size>

以下形式之一

auto

作为最大值，与 max-content 相同。作为最小值，它代表占据该网格轨道的网格项的最大最小尺寸（由 min-width/min-height 指定）。

auto-fill

如果网格容器在相关轴上有一个确定的或最大的尺寸，那么重复的次数是不会导致网格溢出其网格容器的可能的最大正整数。如果确定，则将每个轨道视为其最大轨道尺寸函数（用于定义 grid-template-rows 或 grid-template-columns 的每个独立值）。否则，将其视为最小轨道尺寸函数，并考虑网格间距。如果任何重复次数都会导致溢出，则重复次数为 1。否则，如果网格容器在相关轴上有一个确定的最小尺寸，则重复次数是满足该最小要求的可能的最小正整数。否则，指定的轨道列表只重复一次。

auto-fit

行为与 auto-fill 相同，只是在放置网格项后，任何空的重复轨道都会被折叠。空轨道是指没有置入或跨越其上的在流网格项的轨道。（如果所有轨道都为空，这可能导致所有轨道都被折叠。）

一个被折叠的轨道被视为具有单一的固定轨道尺寸函数 0px，其两侧的间距也会被折叠。

为了找到自动重复轨道的数量，用户代理会将轨道尺寸向下取整为一个用户代理指定的值（例如，1px），以避免除以零。

max-content

表示占据该网格轨道的网格项的最大内容贡献值。

min-content

表示占据该网格轨道的网格项的最小内容贡献值。

正式语法

<track-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )  

<auto-repeat> = 
  repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<fixed-repeat> = 
  repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )  

<name-repeat> = 
  repeat( [ <integer [1,∞]> | auto-fill ] , <line-names>+ )  

<line-names> = 
  '[' <custom-ident>* ']'  

<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )          

<fixed-size> = 
  <fixed-breadth>                                   |
  minmax( <fixed-breadth> , <track-breadth> )       |
  minmax( <inflexible-breadth> , <fixed-breadth> )  

<track-breadth> = 
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto                       

<inflexible-breadth> = 
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto                       

<length-percentage> = 
  <length>      |
  <percentage>  

<fixed-breadth> = 
  <length-percentage [0,∞]>

示例

使用 repeat() 指定网格列

HTML

html
<div id="container">
  <div>This item is 50 pixels wide.</div>
  <div>Item with flexible width.</div>
  <div>This item is 50 pixels wide.</div>
  <div>Item with flexible width.</div>
  <div>Inflexible item of 100 pixels width.</div>
</div>

CSS

css
#container {
  display: grid;
  grid-template-columns: repeat(2, 50px 1fr) 100px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

结果

规范

规范
CSS 网格布局模块 Level 2
# 重复表示法

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ，由 MDN 贡献者们修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.