You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Like <a href="http://www.w3.org/TR/css-flexbox-1/">Flexible Box Layout</a>,
89
88
Grid Layout is a new layout model for CSS
90
89
that has powerful abilities to control the sizing and positioning of boxes and their contents.
91
-
Unlike Flexbox, however, which is single-axis–oriented,
90
+
Unlike <a href="http://www.w3.org/TR/css-flexbox-1/">Flexible Box Layout</a>, which is single-axis–oriented,
92
91
Grid Layout is optimized for 2-dimensional layouts:
93
92
those in which alignment of content is desired in both dimensions.
94
-
In addition, and unlike tables,
95
-
the absence of content structure in grid layout helps to manage changes to layout
96
-
by allowing fluid and source order independent layout techniques.
93
+
94
+
<figure>
95
+
<img src="images/flex-layout.png"
96
+
alt="An example of flex layout:
97
+
two rows of items,
98
+
the first being three items a third of the space each,
99
+
and the second being five items, a fifth of the space each.
100
+
There is therefore alignment along the row axis, but not along the column axis.">
101
+
<caption>Exemplary Flex Layout Example</caption>
102
+
</figure>
103
+
104
+
<figure>
105
+
<img src="images/grid-layout.png"
106
+
alt="An example of grid layout:
107
+
two rows of items,
108
+
the first being four items—the last of which spans both rows,
109
+
and the second being two items—the first of which spans the first two columns— plus the spanned item from the first row.">
110
+
<caption>Exemplary Grid Layout Example</caption>
111
+
</figure>
112
+
113
+
In addition, due to its ability to explicitly position items in the grid,
114
+
Grid Layout allows dramatic transformations in visual layout structure
115
+
without requiring corresponding markup changes.
97
116
By combining <a href="http://www.w3.org/TR/css3-mediaqueries/">media queries</a> with the CSS properties that control layout of the grid container and its children,
98
117
authors can adapt their layout to changes in device form factors, orientation, and available space,
99
-
without needing to alter the semantic nature of their content.
118
+
while preserving a more ideal semantic structuring of their content
119
+
across presentations.
120
+
121
+
Although many layouts can be expressed with either Grid or Flexbox,
122
+
they each have their specialties.
123
+
Grid enforces 2-dimensional alignment,
124
+
uses a top-down approach to layout,
125
+
allows explicit overlapping of items,
126
+
and has more powerful spanning capabilities.
127
+
Flexbox focuses on space distribution within an axis,
128
+
uses a simpler bottom-up approach to layout,
129
+
can use a content-size–based line-wrapping system to control its secondary axis,
130
+
and relies on the underlying markup hierarchy
131
+
to build more complex layouts.
132
+
It is expected that both will be valuable
133
+
and complementary tools for CSS authors.
100
134
101
135
<h2 id='overview'>
102
136
Overview</h2>
@@ -106,20 +140,159 @@ Overview</h2>
106
140
an intersecting set of horizontal and vertical lines
107
141
which create a sizing and positioning coordinate system
108
142
for the <a>grid container</a>’s contents.
109
-
The contents of the <a>grid container</a> are organized into <a>grid items</a>
143
+
Grid Layout features
144
+
145
+
<ul>
146
+
<li>
147
+
fixed, flexible, and content-based <a href="#track-sizing">track sizing functions</a>
148
+
<li>
149
+
<a href="#placement">explicit item placement</a> via forwards (positive) and backwards (negative) numerical grid coordinates,
150
+
named grid lines, and named grid areas;
151
+
automatic item placement into empty slots, including <a href="#order-property">reordering with <css>order</css></a>
152
+
<li>
153
+
space-sensitive track repetition
154
+
and
155
+
automatic addition of rows or columns to accommodate additional content
156
+
<li>
157
+
control over alignment and spacing with
158
+
<a href="#auto-margins">margins</a>, <a>gutters</a>, and the <a href="http://www.w3.org/TR/css-align/">alignment properties</a>
159
+
<li>
160
+
the ability to overlap content and <a href="#z-order">control layering with <css>z-index</css></a>
161
+
</ul>
162
+
163
+
<a>Grid containers</a> can be nested or mixed with <a>flex containers</a>
164
+
as necessary to create more complex layouts.
165
+
Furthermore, <a>subgrids</a> provide the ability to pass grid parameters down through nested elements, and content-based sizing information back up to their parent grid.
166
+
167
+
<h3 id="overview-grid">
168
+
Declaring the Grid</h3>
169
+
170
+
The <a>tracks</a> (<a>rows</a> and <a>columns</a>) of the <a>grid</a>
171
+
are declared and sized
172
+
either explicitly through the <a>explicit grid</a> properties
173
+
or are implicitly created when items are placed outside the <a>explicit grid</a>.
174
+
The 'grid' shorthand and its sub-properties define the parameters
175
+
of the grid.
176
+
[[#grid-definition]]
177
+
178
+
<div class="example">
179
+
Below are some examples of grid declarations:
180
+
181
+
<ul>
182
+
<li>
183
+
The following declares a grid with four named areas:
184
+
<code>H</code>, <code>A</code>, <code>B</code>,
185
+
and <code>F</code>.
186
+
The first column is sized to fit its contents,
187
+
and the second column takes up the remaining space.
188
+
Rows default to ''grid-template-rows/auto'' (content-based) sizing; the last row is given a fixed size of 30px.
189
+
<pre>
190
+
main {
191
+
grid: "H H "
192
+
"A B "
193
+
"F F " 30px
194
+
/ auto 1fr;
195
+
}
196
+
</pre>
197
+
<li>
198
+
The following declares a grid with as many rows
199
+
of at least 5em as will fit in the height of the grid container (''100vh'')
200
+
and no explicit columns;
201
+
instead columns are added as content is added.
202
+
The resulting column widths are equalized.
203
+
Since content overflowing to the right won't print,
204
+
an alternate layout for printing adds rows instead.
205
+
206
+
<pre>
207
+
main {
208
+
grid: repeat(auto-fill, 5em) / auto-flow 1fr;
209
+
height: 100vh;
210
+
}
211
+
@media print {
212
+
main {
213
+
grid: auto-flow 1fr / repeat(auto-fill, 5em);
214
+
}
215
+
</pre>
216
+
<li>
217
+
The following declares a grid with 5 evenly-sized columns
218
+
and three rows,
219
+
with the middle row taking up all remaining space
220
+
(and at least enough to fit its contents).
221
+
222
+
<pre>
223
+
main {
224
+
grid: auto 1fr auto / repeat(5, 1fr);
225
+
min-height: 100vh;
226
+
}
227
+
</pre>
228
+
</ul>
229
+
</div>
230
+
231
+
The resulting grid is <a href="#grid-align">aligned</a> within the <a>grid container</a>
232
+
by means of the 'align-content' and 'justify-content' properties.
233
+
[[#alignment]]
234
+
235
+
<div class="example">
236
+
The following example justifies all columns
237
+
by distributing any extra space among them,
238
+
and centers the grid in the <a>grid container</a>
239
+
when it is smaller than 100vh.
240
+
241
+
<pre>
242
+
main {
243
+
grid: auto-flow 1fr / repeat(auto-fill, 5em);
244
+
min-height: 100vh;
245
+
justify-content: space-between;
246
+
align-content: safe center;
247
+
}
248
+
</pre>
249
+
</div>
250
+
251
+
<h3 id="overview-placement">
252
+
Placing Items</h3>
253
+
254
+
The contents of the <a>grid container</a> are organized into individual <a>grid items</a>
110
255
(analogous to <a>flex items</a>),
111
-
which are then assigned to slots (<a>grid areas</a>) in the <a>grid</a>--
112
-
either explicitly through the <a>grid-placement properties</a>
113
-
or implicitly through <a href="#auto-placement">auto-placement</a>.
114
-
If the <a>explicit grid</a>
115
-
(defined by the 'grid-template-*' properties)
116
-
can’t fit all of the <a>grid items</a>,
117
-
<a>implicit grid tracks</a> are added
118
-
(as defined by the 'grid-auto-*' properties).
119
-
A 'grid' shorthand on the <a>grid container</a>
120
-
provides for setting all of these grid definition parameters at once,
121
-
while the <a>grid-placement properties</a> on the <a>grid items</a>
122
-
determine their placement within the grid.
256
+
which are then assigned to slots (<a>grid areas</a>) in the <a>grid</a>.
257
+
They can be explicitly placed using coordinates through the <a>grid-placement properties</a>
258
+
or implicitly placed into empty slots using <a href="#auto-placement">auto-placement</a>.
259
+
[[#placement]]
260
+
261
+
<div class="example">
262
+
Below are some examples of grid placement declarations
263
+
using the 'grid-area' shorthand:
264
+
265
+
<pre>
266
+
grid-area: a; /* Place into named grid area “a” */
267
+
grid-area: auto; /* Auto-place into next empty slot */
268
+
grid-area: 2 / 4; /* Place into row 2, column 4 */
269
+
grid-area: 1 / 3 / -1; /* Place into column 3, span all rows */
0 commit comments