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
.
/* <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])
<length>
A positive integer length.
<percentage>
<percentage>
must be treated as
auto
. The user-agent may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.
<flex>
fr
specifying the track’s flex factor. Each
<flex>
-sized track takes a share of the remaining space in proportion to its flex factor.
max-content
Represents the largest max-content contribution of the grid items occupying the grid track.
min-content
Represents the largest min-content contribution of the grid items occupying the grid track.
auto
max-content
. As a minimum it represents the largest minimum size (as specified by
min-width
/
min-height
) of the grid items occupying the grid track.
auto-fill
grid-template-rows
or
grid-template-columns
), if that is definite. Otherwise, as its minimum track sizing function, and taking grid-gap into account. If any number of repetitions would overflow, then the repetition is
1
. Otherwise, if the grid container has a definite minimal size in the relevant axis, the number of repetitions is the smallest possible positive integer that fulfills that minimum requirement. Otherwise, the specified track list repeats only once.
auto-fit
Behaves the same as
auto-fill
, except that after placing the grid items any empty repeated tracks are collapsed. An empty track is one with no in-flow grid items placed into or spanning across it. (This can result in all tracks being collapsed, if they’re all empty.)
A collapsed track is treated as having a single fixed track sizing function of
0px
, and the gutters on either side of it collapse.
For the purpose of finding the number of auto-repeated tracks, the user agent floors the track size to a user agent specified value (e.g.,
1px
), to avoid division by zero.
<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>
#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 栅格布局
The definition of 'repeat()' in that specification. |
候选推荐 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
repeat()
|
Chrome
完整支持
57
|
Edge 完整支持 16 |
Firefox
部分支持
57
注意事项
|
IE 不支持 No |
Opera
完整支持
44
|
Safari 完整支持 10.1 | WebView Android 完整支持 57 |
Chrome Android
完整支持
57
|
Firefox Android
完整支持
52
|
Opera Android
完整支持
43
|
Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 6.0 |
完整支持
部分支持
不支持
见实现注意事项。
用户必须明确启用此特征。
grid-template
,
grid-template-rows
,
grid-template-columns
,
grid-template-areas
,
grid-auto-columns
,
grid-auto-rows
,
grid-auto-flow