Skip to content

Commit ecb4878

Browse files
tabatkinstabatkins
committed
[css-grid] Move motivation section to be in Intro. Fixes #1115.
1 parent 1c2e837 commit ecb4878

File tree

1 file changed

+173
-173
lines changed

1 file changed

+173
-173
lines changed

‎css-grid/Overview.bs

+173-173
Original file line numberDiff line numberDiff line change
@@ -134,177 +134,6 @@ Introduction</h2>
134134
It is expected that both will be valuable
135135
and complementary tools for CSS authors.
136136

137-
<h2 id='overview'>
138-
Overview</h2>
139-
140-
<em>This section is not normative.</em>
141-
142-
Grid Layout controls the layout of its content
143-
through the use of a <a>grid</a>:
144-
an intersecting set of horizontal and vertical lines
145-
which create a sizing and positioning coordinate system
146-
for the <a>grid container</a>’s contents.
147-
Grid Layout features
148-
149-
<ul>
150-
<li>
151-
fixed, flexible, and content-based <a href="#track-sizing">track sizing functions</a>
152-
<li>
153-
<a href="#placement">explicit item placement</a> via forwards (positive) and backwards (negative) numerical grid coordinates,
154-
named grid lines, and named grid areas;
155-
automatic item placement into empty slots, including <a href="#order-property">reordering with <css>order</css></a>
156-
<li>
157-
space-sensitive track repetition
158-
and
159-
automatic addition of rows or columns to accommodate additional content
160-
<li>
161-
control over alignment and spacing with
162-
<a href="#auto-margins">margins</a>, <a>gutters</a>, and the <a href="http://www.w3.org/TR/css-align/">alignment properties</a>
163-
<li>
164-
the ability to overlap content and <a href="#z-order">control layering with <css>z-index</css></a>
165-
</ul>
166-
167-
<a>Grid containers</a> can be nested or mixed with <a>flex containers</a>
168-
as necessary to create more complex layouts.
169-
170-
<h3 id="overview-grid">
171-
Declaring the Grid</h3>
172-
173-
The <a>tracks</a> (<a>rows</a> and <a>columns</a>) of the <a>grid</a>
174-
are declared and sized
175-
either explicitly through the <a>explicit grid</a> properties
176-
or are implicitly created when items are placed outside the <a>explicit grid</a>.
177-
The 'grid' shorthand and its sub-properties define the parameters
178-
of the grid.
179-
[[#grid-definition]]
180-
181-
<div class="example">
182-
Below are some examples of grid declarations:
183-
184-
<ul>
185-
<li>
186-
The following declares a grid with four named areas:
187-
<code>H</code>, <code>A</code>, <code>B</code>,
188-
and <code>F</code>.
189-
The first column is sized to fit its contents (''grid-template-columns/auto''),
190-
and the second column takes up the remaining space (<a value lt=fr>1fr</a>).
191-
Rows default to ''grid-template-rows/auto'' (content-based) sizing;
192-
the last row is given a fixed size of ''30px''.
193-
<pre>
194-
main {
195-
grid: "H H "
196-
"A B "
197-
"F F " 30px
198-
/ auto 1fr;
199-
}
200-
</pre>
201-
<li>
202-
The following declares a grid with as many rows of at least ''5em''
203-
as will fit in the height of the grid container (''100vh'').
204-
The grid has no explicit columns;
205-
instead columns are added as content is added,
206-
the resulting column widths are equalized (<a value lt=fr>1fr</a>)
207-
Since content overflowing to the right won't print,
208-
an alternate layout for printing adds rows instead.
209-
210-
<pre>
211-
main {
212-
grid: repeat(auto-fill, 5em) / auto-flow 1fr;
213-
height: 100vh;
214-
}
215-
@media print {
216-
main {
217-
grid: auto-flow 1fr / repeat(auto-fill, 5em);
218-
}
219-
</pre>
220-
<li>
221-
The following declares a grid with 5 evenly-sized columns
222-
and three rows,
223-
with the middle row taking up all remaining space
224-
(and at least enough to fit its contents).
225-
226-
<pre>
227-
main {
228-
grid: auto 1fr auto / repeat(5, 1fr);
229-
min-height: 100vh;
230-
}
231-
</pre>
232-
</ul>
233-
</div>
234-
235-
<h3 id="overview-placement">
236-
Placing Items</h3>
237-
238-
The contents of the <a>grid container</a> are organized into individual <a>grid items</a>
239-
(analogous to <a>flex items</a>),
240-
which are then assigned to slots (<a>grid areas</a>) in the <a>grid</a>.
241-
They can be explicitly placed using coordinates through the <a>grid-placement properties</a>
242-
or implicitly placed into empty slots using <a href="#auto-placement">auto-placement</a>.
243-
[[#placement]]
244-
245-
<div class="example">
246-
Below are some examples of grid placement declarations
247-
using the 'grid-area' shorthand:
248-
249-
<pre>
250-
grid-area: a; /* Place into named grid area “a” */
251-
grid-area: auto; /* Auto-place into next empty slot */
252-
grid-area: 2 / 4; /* Place into row 2, column 4 */
253-
grid-area: 1 / 3 / -1; /* Place into column 3, span all rows */
254-
grid-area: header-start / sidebar-start / footer-end / sidebar-start;
255-
/* Place using named lines */
256-
</pre>
257-
258-
These are equivalent to the following 'grid-row' + 'grid-column' declarations:
259-
260-
<pre>
261-
grid-row: a; grid-column: a;
262-
grid-row: auto; grid-column: auto;
263-
grid-row: 2; grid-column: 4;
264-
grid-row: 1 / -1; grid-column: 3;
265-
grid-row: header-start / footer-end; grid-column: sidebar-start / footer-end;
266-
</pre>
267-
268-
They can further be decomposed into the 'grid-row-start'/'grid-row-end'/'grid-column-start'/'grid-column-end' longhands, e.g.
269-
<pre>
270-
grid-area: a; &rarr;
271-
grid-row-start: a; grid-column-start: a; grid-row-end: a; grid-column-end: a;
272-
273-
grid-area: 1 / 3 / -1; &rarr;
274-
grid-row-start: 1; grid-column-start: 3; grid-row-end: -1; grid-column-end: auto;
275-
</pre>
276-
</div>
277-
278-
<h3 id="overview-sizing">
279-
Sizing the Grid</h3>
280-
281-
Once the <a>grid items</a> have been <a href="#placement">placed</a>,
282-
the sizes of the <a>grid tracks</a> (rows and columns) are calculated,
283-
accounting for the sizes of their contents and/or available space as specified in the grid definition.
284-
285-
The resulting sized grid is <a href="#grid-align">aligned</a> within the <a>grid container</a>
286-
according to the <a>grid container</a>’s 'align-content' and 'justify-content' properties.
287-
[[#alignment]]
288-
289-
<div class="example">
290-
The following example justifies all columns
291-
by distributing any extra space among them,
292-
and centers the grid in the <a>grid container</a>
293-
when it is smaller than 100vh.
294-
295-
<pre>
296-
main {
297-
grid: auto-flow 1fr / repeat(auto-fill, 5em);
298-
min-height: 100vh;
299-
justify-content: space-between;
300-
align-content: safe center;
301-
}
302-
</pre>
303-
</div>
304-
305-
Finally each <a>grid item</a> is sized and aligned within its assigned <a>grid area</a>,
306-
as specified by its own <a href="https://www.w3.org/TR/CSS2/visudet.html">sizing</a> [[!CSS21]] and <a lt="box alignment properties">alignment properties</a> [[!CSS-ALIGN-3]].
307-
308137

309138
<h3 id='background'>
310139
Background and Motivation</h3>
@@ -369,7 +198,7 @@ Adapting Layouts to Available Space</h4>
369198
<li>
370199
The score area is beneath the stats area.
371200
<li>
372-
The score area is aligned to the controls beneath the stats are.
201+
The score area is aligned to the controls beneath the stats area.
373202
</ul>
374203

375204
The following grid layout example shows how an author might achieve
@@ -528,6 +357,177 @@ Source-Order Independence</h4>
528357
as a substitute for correct source ordering,
529358
as that can ruin the accessibility of the document.
530359

360+
<h2 id='overview'>
361+
Overview</h2>
362+
363+
<em>This section is not normative.</em>
364+
365+
Grid Layout controls the layout of its content
366+
through the use of a <a>grid</a>:
367+
an intersecting set of horizontal and vertical lines
368+
which create a sizing and positioning coordinate system
369+
for the <a>grid container</a>’s contents.
370+
Grid Layout features
371+
372+
<ul>
373+
<li>
374+
fixed, flexible, and content-based <a href="#track-sizing">track sizing functions</a>
375+
<li>
376+
<a href="#placement">explicit item placement</a> via forwards (positive) and backwards (negative) numerical grid coordinates,
377+
named grid lines, and named grid areas;
378+
automatic item placement into empty slots, including <a href="#order-property">reordering with <css>order</css></a>
379+
<li>
380+
space-sensitive track repetition
381+
and
382+
automatic addition of rows or columns to accommodate additional content
383+
<li>
384+
control over alignment and spacing with
385+
<a href="#auto-margins">margins</a>, <a>gutters</a>, and the <a href="http://www.w3.org/TR/css-align/">alignment properties</a>
386+
<li>
387+
the ability to overlap content and <a href="#z-order">control layering with <css>z-index</css></a>
388+
</ul>
389+
390+
<a>Grid containers</a> can be nested or mixed with <a>flex containers</a>
391+
as necessary to create more complex layouts.
392+
393+
<h3 id="overview-grid">
394+
Declaring the Grid</h3>
395+
396+
The <a>tracks</a> (<a>rows</a> and <a>columns</a>) of the <a>grid</a>
397+
are declared and sized
398+
either explicitly through the <a>explicit grid</a> properties
399+
or are implicitly created when items are placed outside the <a>explicit grid</a>.
400+
The 'grid' shorthand and its sub-properties define the parameters
401+
of the grid.
402+
[[#grid-definition]]
403+
404+
<div class="example">
405+
Below are some examples of grid declarations:
406+
407+
<ul>
408+
<li>
409+
The following declares a grid with four named areas:
410+
<code>H</code>, <code>A</code>, <code>B</code>,
411+
and <code>F</code>.
412+
The first column is sized to fit its contents (''grid-template-columns/auto''),
413+
and the second column takes up the remaining space (<a value lt=fr>1fr</a>).
414+
Rows default to ''grid-template-rows/auto'' (content-based) sizing;
415+
the last row is given a fixed size of ''30px''.
416+
<pre>
417+
main {
418+
grid: "H H "
419+
"A B "
420+
"F F " 30px
421+
/ auto 1fr;
422+
}
423+
</pre>
424+
<li>
425+
The following declares a grid with as many rows of at least ''5em''
426+
as will fit in the height of the grid container (''100vh'').
427+
The grid has no explicit columns;
428+
instead columns are added as content is added,
429+
the resulting column widths are equalized (<a value lt=fr>1fr</a>)
430+
Since content overflowing to the right won't print,
431+
an alternate layout for printing adds rows instead.
432+
433+
<pre>
434+
main {
435+
grid: repeat(auto-fill, 5em) / auto-flow 1fr;
436+
height: 100vh;
437+
}
438+
@media print {
439+
main {
440+
grid: auto-flow 1fr / repeat(auto-fill, 5em);
441+
}
442+
</pre>
443+
<li>
444+
The following declares a grid with 5 evenly-sized columns
445+
and three rows,
446+
with the middle row taking up all remaining space
447+
(and at least enough to fit its contents).
448+
449+
<pre>
450+
main {
451+
grid: auto 1fr auto / repeat(5, 1fr);
452+
min-height: 100vh;
453+
}
454+
</pre>
455+
</ul>
456+
</div>
457+
458+
<h3 id="overview-placement">
459+
Placing Items</h3>
460+
461+
The contents of the <a>grid container</a> are organized into individual <a>grid items</a>
462+
(analogous to <a>flex items</a>),
463+
which are then assigned to slots (<a>grid areas</a>) in the <a>grid</a>.
464+
They can be explicitly placed using coordinates through the <a>grid-placement properties</a>
465+
or implicitly placed into empty slots using <a href="#auto-placement">auto-placement</a>.
466+
[[#placement]]
467+
468+
<div class="example">
469+
Below are some examples of grid placement declarations
470+
using the 'grid-area' shorthand:
471+
472+
<pre>
473+
grid-area: a; /* Place into named grid area “a” */
474+
grid-area: auto; /* Auto-place into next empty slot */
475+
grid-area: 2 / 4; /* Place into row 2, column 4 */
476+
grid-area: 1 / 3 / -1; /* Place into column 3, span all rows */
477+
grid-area: header-start / sidebar-start / footer-end / sidebar-start;
478+
/* Place using named lines */
479+
</pre>
480+
481+
These are equivalent to the following 'grid-row' + 'grid-column' declarations:
482+
483+
<pre>
484+
grid-row: a; grid-column: a;
485+
grid-row: auto; grid-column: auto;
486+
grid-row: 2; grid-column: 4;
487+
grid-row: 1 / -1; grid-column: 3;
488+
grid-row: header-start / footer-end; grid-column: sidebar-start / footer-end;
489+
</pre>
490+
491+
They can further be decomposed into the 'grid-row-start'/'grid-row-end'/'grid-column-start'/'grid-column-end' longhands, e.g.
492+
<pre>
493+
grid-area: a; &rarr;
494+
grid-row-start: a; grid-column-start: a; grid-row-end: a; grid-column-end: a;
495+
496+
grid-area: 1 / 3 / -1; &rarr;
497+
grid-row-start: 1; grid-column-start: 3; grid-row-end: -1; grid-column-end: auto;
498+
</pre>
499+
</div>
500+
501+
<h3 id="overview-sizing">
502+
Sizing the Grid</h3>
503+
504+
Once the <a>grid items</a> have been <a href="#placement">placed</a>,
505+
the sizes of the <a>grid tracks</a> (rows and columns) are calculated,
506+
accounting for the sizes of their contents and/or available space as specified in the grid definition.
507+
508+
The resulting sized grid is <a href="#grid-align">aligned</a> within the <a>grid container</a>
509+
according to the <a>grid container</a>’s 'align-content' and 'justify-content' properties.
510+
[[#alignment]]
511+
512+
<div class="example">
513+
The following example justifies all columns
514+
by distributing any extra space among them,
515+
and centers the grid in the <a>grid container</a>
516+
when it is smaller than 100vh.
517+
518+
<pre>
519+
main {
520+
grid: auto-flow 1fr / repeat(auto-fill, 5em);
521+
min-height: 100vh;
522+
justify-content: space-between;
523+
align-content: safe center;
524+
}
525+
</pre>
526+
</div>
527+
528+
Finally each <a>grid item</a> is sized and aligned within its assigned <a>grid area</a>,
529+
as specified by its own <a href="https://www.w3.org/TR/CSS2/visudet.html">sizing</a> [[!CSS21]] and <a lt="box alignment properties">alignment properties</a> [[!CSS-ALIGN-3]].
530+
531531

532532
<!--
533533
██████ ███████ ██ ██ ██████ ████████ ████████ ████████ ██████
@@ -4271,7 +4271,7 @@ Changes</h2>
42714271
the item’s</ins> 'min-width' or 'min-height' value
42724272
(whichever matches the relevant axis)
42734273
<ins>as its specified size</ins>
4274-
if its specified size
4274+
if its specified size
42754275
<ins>('width' or 'height', whichever matches the relevant axis)</ins>
42764276
is ''width/auto'',
42774277
or else the item’s <a>min-content contribution</a>.

0 commit comments

Comments
 (0)