aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/css/grid-auto-rows/index.html
blob: a448a6833b28257b5fe2ec758eef50b628a5da58 (plain)
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
---
title: grid-auto-rows
slug: Web/CSS/grid-auto-rows
tags:
  - CSS
  - CSS Grid
  - CSS Property
  - CSS属性
  - CSS网格
  - Reference
  - 参考
translation_of: Web/CSS/grid-auto-rows
---
<p>CSS属性 <strong><code>grid-auto-rows</code></strong> 用于指定隐式创建的行轨道大小。</p>

<div>{{EmbedInteractiveExample("pages/css/grid-auto-rows.html")}}</div>

<p class="hidden">此交互式示例的源代码托管于GitHub中。如果您想为交互示例贡献代码,请 clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 并且给我们发送pull request.</p>

<p>如果定位到某行中的网格元素没有使用 {{cssxref("grid-template-rows")}}来指定大小,则会隐式创建{{glossary("grid", "grid")}} 轨道来保存它。这可能在显示定位到超出范围的行,或者由自动放置算法创建额外的行时发生。</p>

<h2 id="语法">语法</h2>

<pre class="brush: css no-line-numbers">/* Keyword values */
grid-auto-rows: min-content;
grid-auto-rows: max-content;
grid-auto-rows: auto;

/* &lt;length&gt; values */
grid-auto-rows: 100px;
grid-auto-rows: 20cm;
grid-auto-rows: 50vmax;

/* &lt;percentage&gt; values */
grid-auto-rows: 10%;
grid-auto-rows: 33.3%;

/* &lt;flex&gt; values */
grid-auto-rows: 0.5fr;
grid-auto-rows: 3fr;

/* minmax() values */
grid-auto-rows: minmax(100px, auto);
grid-auto-rows: minmax(max-content, 2fr);
grid-auto-rows: minmax(20%, 80vmax);

/* multiple track-size values */
grid-auto-rows: min-content max-content auto;
grid-auto-rows: 100px 150px 390px;
grid-auto-rows: 10% 33.3%;
grid-auto-rows: 0.5fr 3fr 1fr;
grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

/* Global values */
grid-auto-rows: inherit;
grid-auto-rows: initial;
grid-auto-rows: unset;
</pre>

<h3 id="取值">取值</h3>

<dl>
 <dt><code>&lt;length&gt;</code></dt>
 <dd>一个非负的长度。</dd>
 <dt><code>&lt;percentage&gt;</code></dt>
 <dd>相对于网格窗口块尺寸的非负 {{cssxref("percentage", "&lt;percentage&gt;")}} 值。如果网格容器的块尺寸是不确定的, 则百分比值将被视为 <code>auto</code></dd>
 <dt><code>&lt;flex&gt;</code></dt>
 <dd>非负的、以 <code>fr</code> 为单位的维度指定轨道的弹性因子。每个 <code>&lt;flex&gt;</code>-尺寸的轨道都按其弹性因子的比例挤占剩余空间的一部分。
 <p>当使用在 <code>minmax()</code> 符号外时,意味着最小值为 <code>auto</code> (例: <code>minmax(auto, &lt;flex&gt;)</code>).</p>
 </dd>
 <dt><code>max-content</code></dt>
 <dd>关键词,指明由网格元素中占用空间最大的那一个来决定轨道的尺寸。</dd>
 <dt><code>min-content</code></dt>
 <dd>关键词,指明由网格元素中占用空间最小的那一个来决定轨道的尺寸。</dd>
 <dt><code>minmax(min, max)</code></dt>
 <dd>函数符号,定义一个不小于<code>min</code>且不大于<code>max</code>的尺寸范围。如果<code>max</code><code>min</code>小,则<code>max</code>会被忽略,函数会被录作<code>min</code>处理。作为最大值,<code>&lt;flex&gt;</code> 值设置了轨道的弹性因子。作为最小值,会被当作0处理(或者最小内容——当网格容器指定了尺寸为最小内容)。</dd>
 <dt><code>auto</code></dt>
 <dd>关键字,当用来指定最大值时与最大内容一致,当用来指定最小值时,它表示轨道中所有网格元素最小尺寸中的最大值(由{{cssxref("min-width")}}/{{cssxref("min-height")}}指定)。</dd>
 <dd>
 <p class="note">注意:<code>auto</code> 轨道尺寸(且仅有 <code>auto</code> 轨道尺寸)可配合{{cssxref("align-content")}}{{cssxref("justify-content")}} 属性使用。</p>
 </dd>
</dl>

<h3 id="形式语法">形式语法</h3>

{{csssyntax}}

<h2 id="示例">示例</h2>

<h3 id="HTML内容">HTML内容</h3>

<pre class="brush: html">&lt;div id="grid"&gt;
  &lt;div id="item1"&gt;&lt;/div&gt;
  &lt;div id="item2"&gt;&lt;/div&gt;
  &lt;div id="item3"&gt;&lt;/div&gt;
&lt;/div&gt;</pre>

<h3 id="CSS内容">CSS内容</h3>

<pre class="brush: css; highlight[6]">#grid {
  width: 200px;
  display: grid;
  grid-template-areas: "a a";
  grid-gap: 10px;
  grid-auto-rows: 100px;
}

#grid &gt; div {
  background-color: lime;
}
</pre>

<p>{{EmbedLiveSample("Example", "210px", "210px")}}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">标准</th>
   <th scope="col">状态</th>
   <th scope="col">说明</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS3 Grid", "#propdef-grid-auto-rows", "grid-auto-rows")}}</td>
   <td>{{Spec2("CSS3 Grid")}}</td>
   <td>初始定义。</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="浏览器兼容性">浏览器兼容性</h2>



<p>{{Compat("css.properties.grid-auto-rows")}}</p>

<h2 id="相关链接">相关链接</h2>

<ul>
 <li>相关的CSS属性: {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid")}}</li>
 <li>网格布局指南: <em><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout#Sizing_rows_in_the_implicit_grid">网格布局中的自动定位 - 隐式网格中的行尺寸</a></em></li>
 <li>视频教程:<em><a href="http://gridbyexample.com/video/series-auto-placement-order/">引入网格自动放置和排序</a></em></li>
</ul>

<section class="Quick_links" id="Quick_Links">
<ol>
 <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li>
 <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS参考</strong></a></li>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout">CSS网格布局</a></li>
 <li data-default-state="open"><a href="#"><strong>指南</strong></a>
  <ol>
   <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">与其它布局方式的关系</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">线性布局</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">网格模板区域</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">使用命名网格行布局</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">风格布局中的自动定位</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">网格布局中的框(盒子)对齐</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">网格、逻辑值和书写模式</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS网格布局和辅助功能</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS网格布局与渐进式增强</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">使用网格实现通用布局</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">网格布局的基本概念</a></li>
  </ol>
 </li>
 <li data-default-state="open"><a href="#"><strong>属性</strong></a>
  <ol>
   <li><a href="/zh-CN/docs/Web/CSS/grid">grid</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-area">grid-area</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-column">grid-column</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-gap">grid-gap</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-row">grid-row</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-template">grid-template</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
   <li><a href="/zh-CN/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
  </ol>
 </li>
 <li data-default-state="open"><a href="#"><strong>术语表</strong></a>
  <ol>
   <li><a href="/zh-CN/docs/Glossary/Grid_lines">Grid lines</a></li>
   <li><a href="/zh-CN/docs/Glossary/Grid_tracks">Grid tracks</a></li>
   <li><a href="/zh-CN/docs/Glossary/Grid_cell">Grid cell</a></li>
   <li><a href="/zh-CN/docs/Glossary/Grid_areas">Grid areas</a></li>
   <li><a href="/zh-CN/docs/Glossary/Gutters">Gutters</a></li>
   <li><a href="/zh-CN/docs/Glossary/Grid_rows">Grid row</a></li>
   <li><a href="/zh-CN/docs/Glossary/Grid_column">Grid column</a></li>
  </ol>
 </li>
</ol>
</section>