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
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
|
---
title: grid-area
slug: Web/CSS/grid-area
tags:
- CSS
- CSS 网格
- grid
translation_of: Web/CSS/grid-area
---
<p>CSS 属性 <strong><code>grid-area</code></strong> 是一种对于 {{cssxref("grid-row-start")}}、{{cssxref("grid-column-start")}}、{{cssxref("grid-row-end")}} 和 {{cssxref("grid-column-end")}} 的简写，通过基线（line），跨度（span）或没有（自动）的网格放置在 {{glossary("grid rows", "grid row")}} 中指定一个网格项的大小和位置，继而确定 {{glossary("grid areas", "grid area")}} 的边界。</p>
<pre class="brush: css no-line-numbers">/* Keyword values */
grid-area: auto;
grid-area: auto / auto;
grid-area: auto / auto / auto;
grid-area: auto / auto / auto / auto;
/* <custom-ident> values */
grid-area: some-grid-area;
grid-area: some-grid-area / another-grid-area;
/* <integer> && <custom-ident>? values */
grid-area: some-grid-area 4;
grid-area: some-grid-area 4 / 2 another-grid-area;
/* span && [ <integer> || <custom-ident> ] values */
grid-area: span 3;
grid-area: span 3 / span some-grid-area;
grid-area: 2 span / another-grid-area span;
/* Global values */
grid-area: inherit;
grid-area: initial;
grid-area: unset;
</pre>
<p>如果指定了4个 <code><grid-line></code> 的值，<code>grid-row-start</code> 会被设为第一个值，<code>grid-column-start</code> 为第二个值， <code>grid-row-end</code> 为第三个值，<code>grid-column-end</code> 为第四个值。</p>
<p>当 <code>grid-column-end</code> 被忽略时，若 <code>grid-column-start</code> 为一 {{cssxref("<custom-ident>")}}（自定义关键字数据类型）， <code>grid-column-end</code> 则为该 <code><custom-ident></code>；否则为 <code>auto</code>。</p>
<p>当 <code>grid-row-end</code> 被忽略时，若 <code>grid-row-start</code> 为一 <code><custom-ident></code>，<code>grid-row-end</code> 则为该 <code><custom-ident></code>；否则为 <code>auto</code>。</p>
<p>当 <code>grid-column-start</code> 被忽略时，若 <code>grid-row-start</code> 为一 <code><custom-ident></code>，则所有四项普通写法的属性值均为该值。否则为 <code>auto</code>。</p>
<p>网格面的属性亦可设为一 {{cssxref("<custom-ident>")}} 作为其名称，然后可通过 {{cssxref("grid-template-areas")}} 放置。</p>
<h2 id="语法">语法</h2>
<pre class="brush: css">/* Keyword values */
grid-area: auto;
grid-area: auto / auto;
grid-area: auto / auto / auto;
grid-area: auto / auto / auto / auto;
/* <custom-ident> values */
grid-area: some-grid-area;
grid-area: some-grid-area / another-grid-area;
/* <integer> && <custom-ident>? values */
grid-area: 4 some-grid-area;
grid-area: 4 some-grid-area / 2 another-grid-area;
/* span && [ <integer> || <custom-ident> ] values */
grid-area: span 3;
grid-area: span 3 / span some-grid-area;
grid-area: 2 span / another-grid-area span;
/* Global values */
grid-area: inherit;
grid-area: initial;
grid-area: unset;</pre>
<h3 id="值">值</h3>
<dl>
<dt><code>auto</code></dt>
<dd>该关键字表明该属性未指定该如何纺织网格项目。网格项目会被以默认跨度（span）<code>1</code>自动放置。</dd>
<dt><code><custom-ident></code> 自定义关键字数据类型</dt>
<dd>如果存在以 '<code><custom-ident>-start</code>'/'<code><custom-ident>-end</code>' 命名的自定义基线，它会将第一个这样的基线贡献给网格单元以布置。
<p class="note"><strong>注意:</strong> 被命名的网格区域（grid areas）会自动生成隐式的被命名的基线，因此指定 <code>grid-row: foo;</code> 将会选择这个命名区域的开始和结束的边界（除非在它之前存在显式指定的以 <code>foo-start</code>/<code>foo-end</code> 命名的其他基线）。</p>
<p>否则，它就会被当作整数 <code>1</code> 与 <code><custom-ident></code> 一起指定。</p>
</dd>
<dt><code><integer> && <custom-ident>?</code></dt>
<dd>将第 n 条网格基线贡献给网格单元布置。如果指定的是负数，则指的是从下边界向上边界计算的反向顺序。如果提供的是 <span style="font-size: 1rem; letter-spacing: -0.00278rem;">{{cssxref("<custom-ident>")}}</span>，那么只有以此命名的基线才会被计算。如果所命名的基线数超过了网格线数，为了找到该位置，所有隐式的网格线会被假定拥有这个命名。</dd>
<dd>{{cssxref("integer")}} 值不能为 <code>0</code>。</dd>
<dt><code>span && [ <integer> || <custom-ident> ]</code></dt>
<dd>为网格单元定义一个跨度，使得网格单元的网格区域中的一条边界远离另一条边界线 n 条基线。如果提供的是
<p>{{cssxref("<custom-ident>")}}，则只有以此命名的基线才会被计算。如果网格线不足，则假定与搜索方向对应的显式网格一侧的所有隐式网格线都具有该名称。</p>
</dd>
<dd>
<p>如果忽略 <integer> ，它就默认设为 <code>1</code>。它的值也不能为0。</p>
</dd>
</dl>
<h3 id="形式文法">形式文法</h3>
{{csssyntax}}
<h2 id="示例">示例</h2>
<h3 id="HTML_内容">HTML 内容</h3>
<pre class="brush: html"><div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div></pre>
<h3 id="CSS_内容">CSS 内容</h3>
<pre class="brush: css; highlight[9]">#grid {
display: grid;
height: 100px;
grid-template: repeat(4, 1fr) / 50px 100px;
}
#item1 {
background-color: lime;
grid-area: 2 / 2 / auto / span 3;
}
#item2 {
background-color: yellow;
}
#item3 {
background-color: blue;
}
</pre>
<p>{{EmbedLiveSample("Example", "100%", "150px")}}</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS3 Grid", "#propdef-grid-area", "grid-area")}}</td>
<td>{{Spec2("CSS3 Grid")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatChrome("57.0")}}<sup>[1]</sup></td>
<td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
<td>{{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td>
<td>{{CompatNo}}<sup>[3]</sup></td>
<td>{{CompatOpera(44)}}<sup>[4]</sup></td>
<td>{{CompatSafari("10.1")}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android Webview</th>
<th>Chrome for Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatChrome("57.0")}}<sup>[1]</sup></td>
<td>{{CompatChrome("57.0")}}<sup>[1]</sup></td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td>
<td>{{CompatNo}}<sup>[3]</sup></td>
<td>{{CompatOperaMobile(44)}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Implemented behind the <em>experimental Web Platform features</em> flag in <code>chrome://flags</code> since Chrome 29.0.</p>
<p>[2] Implemented behind the preference <code>layout.css.grid.enabled</code> since Gecko 40.0 {{geckoRelease("40.0")}}, defaulting to <code>false</code>. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.</p>
<p>[3] Supported as of EdgeHTML 16. Internet Explorer and Edge implement an <a href="https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-row-span-and-grid-column-span">older version of the specification</a>, which does not define this property. See the <a class="external external-icon" href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514853-update-css-grid">request for updating the implementation</a>.</p>
<p>[4] Implemented behind the <em>Enable experimental Web Platform features</em> flag in <code>chrome://flags</code> since Opera 28.0.</p>
<h2 id="另请参见">另请参见</h2>
<ul>
<li>Related CSS properties: {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-template-areas")}}</li>
<li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em></li>
<li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li>
</ul>
<section class="Quick_links" id="Quick_Links">
<ol>
<li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
<li data-default-state="open"><a href="#"><strong>Guides</strong></a>
<ol>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
</ol>
</li>
<li data-default-state="open"><a href="#"><strong>Properties</strong></a>
<ol>
<li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
<li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
</ol>
</li>
<li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
<ol>
<li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
<li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
<li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
<li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
<li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
<li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
<li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
</ol>
</li>
</ol>
</section>
|
