1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
---
title: repeat()
slug: Web/CSS/repeat
tags:
- CSS Grid
- Layout
- Repeat
translation_of: Web/CSS/repeat()
original_slug: Web/CSS/repeat()
---
<div>{{cssref}}</div>
<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a> <code><strong>repeat()</strong></code> 函数表示轨道列表的重复片段，允许以更紧凑的形式写入大量显示重复模式的列或行。</span></p>
<p>该函数可以用于 CSS Grid 属性中 {{cssxref("grid-template-columns")}} 和 {{cssxref("grid-template-rows")}}.</p>
<pre class="brush: css no-line-numbers">/* <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])
</pre>
<h2 id="语法">语法</h2>
<h3 id="取值">取值</h3>
<dl>
<dt>{{cssxref("<length>")}}</dt>
<dd>正整数长度。</dd>
<dt>{{cssxref("<percentage>")}}</dt>
<dd>相对于列网格轨道中网格容器的行内大小以及行网格轨道中网格容器的块大小的非负百分比。如果网格容器的大小取决于它的轨道大小，那么 <code><percentage></code> 必须被视为 <code>auto</code>. 用户代理（user-agent）可以将轨道的固有大小贡献调整为网格容器的大小，将轨道的最终大小增加到可以遵守该百分比的最小数量。</dd>
<dt>{{cssxref("<flex>")}}</dt>
<dd>带有 <code>fr</code> 单位的非负尺寸指定轨道的弹性系数。任何被 <code><flex></code> 指定大小的轨道会根据其弹性系数按比例分配剩余空间。</dd>
<dt><code>max-content</code></dt>
<dd>代表占据网格轨道的网格项目所分配的最大内容区域的最大值。</dd>
<dt><code>min-content</code></dt>
<dd>代表占据网格轨道的网格项目所分配的最小内容区域的最小值。</dd>
<dt><code>auto</code></dt>
<dd>作为最大值，等同于 <code>max-content</code>。作为最小值，它代表占据网格轨道的网格项目的最小尺寸的最大值 （如同{{cssxref("min-width")}}/{{cssxref("min-height")}}所指定的)）。</dd>
<dt><code>auto-fill</code></dt>
<dd>如果网格容器在相关轴上具有确定的大小或最大大小，则重复次数是最大可能的正整数，不会导致网格溢出其网格容器。如果定义了，将每个轨道视为其最大轨道尺寸大小函数 ( <code>grid-template-rows</code> 或 <code>grid-template-columns</code>用于定义的每个独立值。 否则，作为最小轨道尺寸函数，将网格间隙加入计算. 如果重复次数过多，那么重复值是 <code>1</code> 。否则，如果网格容器在相关轴上具有确定的最小尺寸，重复次数是满足该最低要求的可能的最小正整数。 否则，指定的轨道列表仅重复一次。</dd>
<dt><code>auto-fit</code></dt>
<dd>
<p>行为与 <code>auto-fill</code> 相同，除了放置网格项目后，所有空的重复轨道都将折叠。空轨道是指没有流入网格或跨越网格的网格项目。（如果所有轨道都为空，则可能导致所有轨道被折叠。）</p>
<p>折叠的轨道被视为具有单个固定轨道大小函数为 <code>0px</code>，两侧的槽都折叠了。</p>
<p>为了找到自动重复的轨道数，用户代理将轨道大小限制为用户代理指定的值（例如 <code>1px</code>），以避免被零除。</p>
</dd>
</dl>
<h2 id="例子">例子</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css; highlight[3]">#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;
}
</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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></pre>
<h3 id="结果">结果</h3>
<p>{{EmbedLiveSample("Example", "100%", 200)}}</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th>Specification</th>
<th>Status</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}}</td>
<td>{{Spec2("CSS Grid")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("css.properties.grid-template-columns.repeat")}}</p>
|
