repeat()

基线 广泛可用

此功能非常成熟，可以在许多设备和浏览器版本上正常工作。它从 2020 年 7 月.

The **repeat()** CSS function represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form.

试一试

This function can be used in the CSS grid properties grid-template-columns and 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])

The repeat() function takes two arguments

  • repeat count: the first argument specifies the number of times that the track list should be repeated. It is specified with an integer value of 1 or more, or with the keyword values auto-fill or auto-fit. These keyword values repeat the set of tracks as many times as is needed to fill the grid container.
  • tracks: the second argument specifies the set of tracks that will be repeated. Fundamentally this consists of one or more values, where each value represents the size of that track. Each size is specified using either a <track-size> value or a <fixed-size> value. You can also specify one or more line names before or after each track, by providing <line-names> values before and/or after the track size.

If you use auto-fill or auto-fit to set the repeat count, you may only specify track sizes using the <fixed-size> type, not the <track-size> type. This give us three main syntax forms for repeat()

  • <track-repeat>, which uses
    • an integer to set the repeat count
    • <track-size> values to set track sizes.
  • <auto-repeat>, which uses
  • <fixed-repeat>, which uses
    • an integer to set the repeat count
    • <fixed-size> values to set track sizes.

Then if a property declaration uses <auto-repeat>, it is only allowed to use <fixed-repeat> for any additional repeat() calls. For example, this is invalid, because it combines the <auto-repeat> form with the <track-repeat> form

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

There is a fourth form, <name-repeat>, which is used to add line names to subgrids. It only used with the subgrid keyword and only specifies line names, not track sizes.

值

<固定大小>

以下形式之一

<弹性>

带有 fr 单位的非负尺寸，指定了轨道弹性因子。每个 <flex> 大小的轨道按其弹性因子比例占用剩余空间。

<长度>

正整数长度。

<line-names>

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

<百分比>

相对于网格容器内联尺寸的非负百分比（在列网格轨道中），以及相对于网格容器块尺寸的非负百分比（在行网格轨道中）。如果网格容器的大小取决于其轨道的尺寸，则 <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

表示占据网格轨道的网格项目的最大 max-content 贡献。

min-content

表示占据网格轨道的网格项目的最大 min-content 贡献。

示例

使用 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
# repeat-notation

浏览器兼容性

BCD 表格只能在启用 JavaScript 的浏览器中加载。

另请参阅