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
|
---
title: grid-area
slug: Web/CSS/grid-area
translation_of: Web/CSS/grid-area
---
<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">CSS-свойство </span></font><strong>grid-area</strong></code> - это <a href="/en-US/docs/Web/CSS/Shorthand_properties">сокращённая форма записи</a> для свойств {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} и {{cssxref("grid-column-end")}}. Определяет размер и местоположение грид-элемента в пределах {{glossary("grid rows", "grid row")}}. Задаёт края {{glossary("grid areas", "грид-области")}} грид-элемента.</p>
<pre class="brush: css no-line-numbers">/* Ключевые слова в качестве значений */
grid-area: auto;
grid-area: auto / auto;
grid-area: auto / auto / auto;
grid-area: auto / auto / auto / auto;
/* <custom-ident> значения */
grid-area: some-grid-area;
grid-area: some-grid-area / another-grid-area;
/* <integer> && <custom-ident>? значения */
grid-area: some-grid-area 4;
grid-area: some-grid-area 4 / 2 another-grid-area;
/* span && [ <integer> || <custom-ident> ] значения */
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>Если заданы четыре значения <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>Свойство grid-area также может быть установлено в значение {{cssxref("<custom-ident>")}} , которое действует, как имя области. В дальнейшем разместить область в гриде по имени можно с помощью свойства {{cssxref("grid-template-areas")}}.</p>
<p>{{cssinfo}}</p>
<h2 id="Синтаксис">Синтаксис</h2>
<h3 id="Значения">Значения</h3>
<dl>
<dt><code>auto</code></dt>
<dd>- ключевое слово, говорящее о том, что свойство не вносит никаких изменений в размещение грид-элемента. На элемент действует авторазмещение или размер элемента по умолчанию <code>1</code>. <em>(то есть, элемент занимает одну ячейку грид-сетки в заданном направлении)</em></dd>
<dt><code><custom-ident></code></dt>
<dd>если есть именованная линия с именем '<code><custom-ident>-start</code>'/'<code><custom-ident>-end</code>', то грид-элемент привязывается к первой из таких линий.
<p class="note"><strong>Замечание:</strong> Именованные грид-области автоматически генерируют неявные именованные линии с именами подобного формата, поэтому запись <code>grid-area: 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>Contributes the <em>n</em>th grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid.
<p>If a name is given as a {{cssxref("<custom-ident>")}}, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.</p>
<p>An {{cssxref("<integer>")}} value of <code>0</code> is invalid.</p>
</dd>
<dt><code>span && [ <integer> || <custom-ident> ]</code></dt>
<dd>Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is <em>n</em> lines from the opposite edge.
<p>If a name is given as a {{cssxref("<custom-ident>")}}, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.</p>
<p>If the {{cssxref("<integer>")}} is omitted, it defaults to <code>1</code>. Negative integers or 0 are invalid.</p>
</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
{{csssyntax}}
<h2 id="Example">Example</h2>
<h3 id="HTML_content">HTML content</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_content">CSS content</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="Specifications">Specifications</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="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat}}</p>
<h2 id="See_also">See also</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 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>
|
