8000 [css-grid] Fix up the grid-row-start/etc section. · w3c/csswg-drafts@a3c255c · GitHub
Skip to content

Commit a3c255c

Browse files
committed
[css-grid] Fix up the grid-row-start/etc section.
1 parent 33eddbe commit a3c255c

2 files changed

Lines changed: 264 additions & 165 deletions

File tree

css-grid/Overview.html

Lines changed: 170 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
rel=dcterms.rights>
1212
<meta content="CSS Grid Layout" name=dcterms.title>
1313
<meta content=text name=dcterms.type>
14-
<meta content=2013-08-14 name=dcterms.date>
14+
<meta content=2013-08-15 name=dcterms.date>
1515
<meta content="Tab Atkins Jr." name=dcterms.creator>
1616
<meta content="Elika J. Etemad" name=dcterms.creator>
1717
<meta content="Rossen Atanassov" name=dcterms.creator>
@@ -59,12 +59,12 @@
5959

6060
<h1 class=title id=title>CSS Grid Layout</h1>
6161

62-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft, 14 August
62+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft, 15 August
6363
2013</h2>
6464

6565
<dl>
6666
<dt>This version:
67-
<!-- <dd><a href="http://dev.w3.org/csswg/css3-grid-layout/">http://www.w3.org/TR/2013/WD-css3-grid-layout-20130814/</a> -->
67+
<!-- <dd><a href="http://dev.w3.org/csswg/css3-grid-layout/">http://www.w3.org/TR/2013/WD-css3-grid-layout-20130815/</a> -->
6868

6969
<dd><a
7070
href="http://dev.w3.org/csswg/css3-grid-layout/">http://dev.w3.org/csswg/css3-grid-layout/</a>
@@ -1147,8 +1147,8 @@ <h2 id=grid-definition><span class=secno>5. </span> The Explicit Grid</h2>
11471147
<p> Numeric indexes in the <a
11481148
href="#grid-placement-properties"><i>grid-placement properties</i></a>
11491149
count from the edges of the <a href="#explicit-grid"><i>explicit
1150-
grid</i></a>. Positive indexes count from the before/start side, while
1151-
negative indexes count from the after/end side.
1150+
grid</i></a>, starting from 1. Positive indexes count from the
1151+
before/start side, while negative indexes count from the after/end side.
11521152

11531153
<h3 id=track-sizing><span class=secno>5.1. </span> Track Sizing: the ‘<a
11541154
href="#grid-template-rows"><code
@@ -1392,12 +1392,13 @@ <h4 id=named-lines><span class=secno>5.1.1. </span> Named Grid Lines: the
13921392
href="#implicit-named-lines">implicitly named</a> by creating <a
13931393
href="#named-grid-areas"><i>named grid areas</i></a> with the ‘<a
13941394
href="#grid-template-areas"><code
1395-
class=property>grid-template-areas</code></a>’ property. Named lines can
1396-
make the <a href="#grid-placement-properties"><i>grid-placement
1397-
properties</i></a> easier to understand by allowing meaningful names in
1398-
their values, and easier to maintain if the grid definition changes in the
1399-
future by tying a grid item’s position to a stable name rather than a
1400-
shifting numerical index.
1395+
class=property>grid-template-areas</code></a>’ property. Such <dfn
1396+
id=named-lines0 title="named line">named lines</dfn> can make the <a
1397+
href="#grid-placement-properties"><i>grid-placement properties</i></a>
1398+
easier to understand by allowing meaningful names in their values, and
1399+
easier to maintain if the grid definition changes in the future by tying a
1400+
grid item’s position to a stable name rather than a shifting numerical
1401+
index.
14011402

14021403
<div class=example>
14031404
<p> For example, the following code gives meaningful names to all of the
@@ -1580,9 +1581,9 @@ <h4 id=subgrids><span class=secno>5.1.4. </span> Subgrids: the ‘<a
15801581
href="#subgrid0"><i>subgrid</i></a> has an explicit <a
15811582
href="#grid-span"><i>grid span</i></a>, any names for lines beyond the
15821583
span are ignored. If the <a href="#subgrid0"><i>subgrid</i></a> has an
1583-
explicit <i>grid position</i> as well as an explicit <a
1584-
href="#grid-span"><i>grid span</i></a>, it also automatically receives
1585-
the names of the lines that it covers in its parent <a
1584+
explicit <a href="#grid-position"><i>grid position</i></a> as well as an
1585+
explicit <a href="#grid-span"><i>grid span</i></a>, it also automatically
1586+
receives the names of the lines that it covers in its parent <a
15861587
href="#display-grid"><i>grid</i></a>.
15871588
</ul>
15881589

@@ -2486,10 +2487,10 @@ <h3 id=line-placement><span class=secno>7.1. </span> Line-based Placement:
24862487

24872488
<pre>
24882489
<dfn id=ltgrid-line>&lt;grid-line></dfn> =
2489-
auto |
2490-
[ <var>&lt;integer></var> || <var>&lt;string></var> ] |
2491-
[ span &amp;&amp; [ <var>&lt;integer></var> || <var>&lt;string></var> ] ] |
2492-
<var>&lt;ident></var></pre>
2490+
auto |
2491+
<var>&lt;ident></var> |
2492+
[ <var>&lt;integer></var> && <var>&lt;ident></var>? ] |
2493+
[ span &amp;&amp; [ <var>&lt;integer></var> || <var>&lt;ident></var> ] ]</pre>
24932494

24942495
<p> The ‘<a href="#grid-row-start"><code
24952496
class=property>grid-row-start</code></a>’, ‘<a
@@ -2500,100 +2501,149 @@ <h3 id=line-placement><span class=secno>7.1. </span> Line-based Placement:
25002501
class=property>grid-column-end</code></a>’ properties (collectively, the
25012502
<dfn id=grid-placement-properties
25022503
title="grid-placement property|grid-placement properties">grid-placement
2503-
properties</dfn>) specify, respectively, the <i>block-start</i>,
2504-
<i>inline-start</i>, <i>block-end</i>, and <i>inline-end</i> <a
2505-
href="#grid-line"><i>grid lines</i></a> of a <a href="#grid-item"><i>grid
2506-
item</i></a>’s <a href="#grid-area"><i>grid area</i></a>.
2507-
2508-
<p> In each dimension (row or column), they resolve to either a specific
2509-
pair of lines (yielding an <dfn id=explicit-grid-position>explicit grid
2510-
position</dfn> and <dfn id=explicit-grid-span>explicit grid span</dfn>),
2511-
or just an <a href="#explicit-grid-span"><i>explicit grid span</i></a> and
2512-
an <dfn id=automatic-grid-position>automatic grid position</dfn> (implying
2513-
<i>auto-placement</i> in that dimension). If the item is a <a
2514-
href="#subgrid0"><i>subgrid</i></a> in that dimension, it could
2515-
alternatively have an <dfn id=automatic-grid-span>automatic grid
2516-
span</dfn>, with either an <a href="#automatic-grid-position"><i
2517-
title="automatic grid position">automatic</i></a> or <a
2518-
href="#explicit-grid-position"><i>explicit grid position</i></a>.
2519-
2520-
<p> Values have the following meanings:
2504+
properties</dfn>) determine a <a href="#grid-item"><i>grid
2505+
item</i></a>’s <a href="#placement0"><i>placement</i></a> by specifying,
2506+
respectively, the <i>block-start</i>, <i>inline-start</i>,
2507+
<i>block-end</i>, and <i>inline-end</i> <a href="#grid-line"><i>grid
2508+
lines</i></a> of a <a href="#grid-item"><i>grid item</i></a>’s <a
2509+
href="#grid-area"><i>grid area</i></a>.
2510+
2511+
<p> A <a href="#grid-item"><i>grid item</i></a>’s <dfn
2512+
id=placement0>placement</dfn> consists of both a <dfn
2513+
id=grid-position>grid position</dfn> (which can be either <dfn id=definite
2514+
title="definite grid position">definite</dfn> or <dfn id=automatic
2515+
title="automatic grid position">automatic</dfn>) and a <dfn
2516+
id=grid-span>grid span</dfn> (which also can be either <dfn id=definite0
2517+
title="definite grid span">definite</dfn> or <dfn id=automatic0
2518+
title="automatic grid span">automatic</dfn>). The <a
2519+
href="#grid-position"><i>grid position</i></a> indicates the item’s
2520+
location in the <a href="#display-grid"><i>grid</i></a>. The <a
2521+
href="#grid-span"><i>grid span</i></a> indicates how many <a
2522+
href="#grid-track"><i>grid tracks</i></a> the <a href="#grid-item"><i>grid
2523+
item</i></a> occupies. An <a href="#automatic"><i>automatic grid
2524+
position</i></a> t 8096 riggers <i>auto-placement</i>. An <a
2525+
href="#automatic0"><i>automatic grid span</i></a> causes a <a
2526+
href="#subgrid0"><i>subgrid</i></a> to take its <a
2527+
href="#grid-span"><i>grid span</i></a> from the size of its <a
2528+
href="#implicit-grid"><i>implicit grid</i></a>. (See <a
2529+
href="#subgrids">Subgrids</a>, above.)
2530+
2531+
<p> Each <a href="#grid-placement-properties"><i>grid-placement
2532+
property</i></a> contributes a line, a span, or nothing (automatic) to the
2533+
item's row <a href="#placement0"><i>placement</i></a> or column <a
2534+
href="#placement0"><i>placement</i></a>. Values have the following
2535+
meanings:
25212536

25222537
<dl>
2523-
<dt><dfn id=grid-placement-int title=""><var>&lt;integer></var> ||
2524-
<var>&lt;string></var></dfn>
2525-
2526-
<dd> Specifies that the corresponding edge of the item's <a
2527-
href="#grid-area"><i>grid area</i></a> is the <var>N</var>th <a
2528-
href="#grid-line"><i>grid line</i></a> from the corresponding start edge
2529-
of the <a href="#explicit-grid"><i>explicit grid</i></a>. If a negative
2530-
integer is given, it instead counts in reverse, starting from the end
2531-
edge of the <a href="#explicit-grid"><i>explicit grid</i></a>. If a name
2532-
is given as a <var>&lt;string></var>, only lines with that name are
2533-
considered. If the <var>&lt;integer></var> is omitted, it defaults to
2534-
<code class=css>1</code>’. A value of zero makes the declaration
2535-
invalid.
2536-
2537-
<dt><dfn id=grid-placement-span-int title="">span &amp;&amp; [
2538-
<var>&lt;integer> || <var>&lt;string></var> ]</var></dfn>
2539-
2540-
<dd> Specifies an explicit <dfn id=grid-span>grid span</dfn>: the
2541-
corresponding edge of the item's <a href="#grid-area"><i>grid
2542-
area</i></a> is <var>N</var> <a href="#grid-line"><i>grid lines</i></a>
2543-
from the opposite edge of the item's <a href="#grid-area"><i>grid
2544-
area</i></a>. If a name is given as a <var>&lt;string></var>, only lines
2545-
with that name are considered. If the <var>&lt;integer></var> is omitted,
2546-
it defaults to ‘<code class=css>1</code>’. Negative integers or zero
2547-
are invalid.
2548-
<p> If opposing <a href="#grid-placement-properties"><i>grid-placement
2549-
properties</i></a> both specify a <a href="#grid-span"><i>grid
2550-
span</i></a>, they both compute to ‘<a href="#track-size-auto"><code
2551-
class=css>auto</code></a>’.
2552-
25532538
<dt><dfn id=grid-placement-slot title=""><var>&lt;ident></var></dfn>
25542539

2555-
<dd> Specifies that the corresponding edge of the item's <a
2556-
href="#grid-area"><i>grid area</i></a> is the <a
2557-
href="#grid-line"><i>grid line</i></a> at the corresponding edge of the
2558-
<a href="#named-grid-areas"><i>named grid area</i></a>. If the named grid
2559-
area doesn't exist, this value is treated as ‘<a
2560-
href="#track-size-auto"><code class=css>auto</code></a>’ (computing
2561-
either to ‘<a href="#track-size-auto"><code
2562-
class=css>auto</code></a>’ or ‘<code class=css>span 1</code>’).
2540+
<dd> If there is a <a href="#named-grid-areas"><i>named grid area</i></a>
2541+
with the specified name, contributes a line to the <a
2542+
href="#grid-item"><i>grid item</i></a>’s <a
2543+
href="#placement0"><i>placement</i></a> by specifying the line at the
2544+
corresponding edge of that <a href="#named-grid-areas"><i>named grid
2545+
area</i></a>.
2546+
<p> Otherwise, if there is a <a href="#named-lines0"><i>named
2547+
line</i></a> with the specified name, contributes a line to the <a
2548+
href="#grid-item"><i>grid item</i></a>’s <a
2549+
href="#placement0"><i>placement</i></a> by specifying the first line of
2550+
that name.
2551+
2552+
<p> Otherwise, the property contributes nothing (just as if ‘<a
2553+
href="#track-size-auto"><code class=css>auto</code></a>’ were
2554+
specified).
2555+
2556+
<dt><dfn id=grid-placement-int title=""><var>&lt;integer></var> &&
2557+
<var>&lt;ident></var>?</dfn>
2558+
2559+
<dd> Contributes a line to the <a href="#grid-item"><i>grid
2560+
item</i></a>’s <a href="#placement0"><i>placement</i></a> by specifying
2561+
the <var>N</var>th <a href="#grid-line"><i>grid line</i></a>. If a
2562+
negative integer is given, it instead counts in reverse, starting from
2563+
the end edge of the <a href="#explicit-grid"><i>explicit grid</i></a>.
2564+
<p> If a name is given as an <var>&lt;ident></var>, only lines with that
2565+
name are counted. (If no line with that name exists, it instead
2566+
specifies the first grid line; or the last, if the
2567+
<var>&lt;integer></var> is negative. If not enough lines of that name
2568+
exist, it specifies the <em>last</em> such named line; or the first, if
2569+
the <var>&lt;integer></var> is negative.)
2570+
2571+
<p> If the <var>&lt;integer></var> is omitted, it defaults to ‘<code
2572+
class=css>1</code>’. A value of zero makes the declaration invalid.
2573+
2574+
<dt><dfn id=grid-placement-span-int title="">span &amp;&amp; [
2575+
<var>&lt;integer> || <var>&lt;ident></var> ]</var></dfn>
2576+
2577+
<dd> Contributes a <a href="#grid-span"><i>grid span</i></a> to the <a
2578+
href="#grid-item"><i>grid item</i></a>’s <a
2579+
href="#placement0"><i>placement</i></a> by specifying that the
2580+
corresponding edge of the item’s <a href="#grid-area"><i>grid
2581+
area</i></a> is <var>N</var> grid lines from the opposite edge of the
2582+
item’s <a href="#grid-area"><i>grid area</i></a>.
2583+
<p> If a name is given as an <var>&lt;ident></var>, only lines with that
2584+
name are counted. (If no line with that name exists, the name is
2585+
ignored. If not enough lines of that name exist, it spans to the last
2586+
such named line in the spanning direction.)
2587+
2588+
<p> If the <var>&lt;integer></var> is omitted, it defaults to ‘<code
2589+
class=css>1</code>’. Negative integers or zero are invalid.
25632590

25642591
<dt><dfn id=grid-placement-auto title="">auto</dfn>
25652592

2566-
<dd> If the opposing <a
2567-
href="#grid-placement-properties"><i>grid-placement property</i></a>
2568-
specifies a <a href="#grid-line"><i>grid line</i></a>, ‘<a
2569-
href="#track-size-auto"><code class=css>auto</code></a>’ computes to
2570-
<code class=css>span 1</code>’. Otherwise (if the opposing <a
2571-
href="#grid-placement-properties"><i>grid-placement property</i></a> is
2572-
<a href="#track-size-auto"><code class=css>auto</code></a>’ or
2573-
specifies an explicit <a href="#grid-span"><i>grid span</i></a>), it
2574-
indicates that the <a href="#grid-item"><i>grid item</i></a> is placed
2575-
using the <i>auto-placement</i> algorithm.
2593+
<dd> The property contributes nothing to the <a href="#grid-item"><i>grid
2594+
item</i></a>’s <a href="#placement0"><i>placement</i></a>.
25762595
</dl>
25772596

2578-
<p> If ‘<code class=css>grid-row/column-end</code>’ specifies a line at
2579-
or before that specified by ‘<code
2580-
class=css>grid-row/column-start</code>’, it computes to ‘<code
2581-
class=css>span 1</code>’.
2582-
2583-
<p> If ‘<a href="#grid-row-start"><code
2584-
class=property>grid-row-start</code></a>’ specifies a named <a
2585-
href="#grid-line"><i>grid line</i></a>, but no <a
2586-
href="#grid-line"><i>grid row lines</i></a> of that name exist, the
2587-
row-start edge of the <a href="#grid-area"><i>grid area</i></a> is set to
2588-
the first <a href="#grid-line"><i>grid row line</i></a> (or the last, if
2589-
the <var>&lt;integer></var> is negative). If there are <a
2590-
href="#grid-line"><i>grid row lines</i></a> of that name, but the
2591-
<var>&lt;integer></var> specified exceeds the number of such <a
2592-
href="#grid-line"><i>grid row lines</i></a>, the row-start edge of the <a
2593-
href="#grid-area"><i>grid area</i></a> is set to the last <a
2594-
href="#grid-line"><i>grid row line</i></a> of that name (or the first, if
2595-
the <var>&lt;integer></var> is negative). Analogously for the other three
2596-
<a href="#grid-placement- 2CAD properties"><i>grid-placement properties</i></a>.
2597+
<p> If ‘<a href="#grid-row-end"><code
2598+
class=property>grid-row-end</code></a>’/‘<a
2599+
href="#grid-column-end"><code class=property>grid-column-end</code></a>
2600+
specifies a line at or before that specified by ‘<a
2601+
href="#grid-row-start"><code
2602+
class=property>grid-row-start</code></a>’/‘<a
2603+
href="#grid-column-start"><code
2604+
class=property>grid-column-start</code></a>’, it instead contributes
2605+
nothing.
2606+
2607+
<p> In each dimension (row or column), if the corresponding pair of
2608+
properties contributed:
2609+
2610+
<dl>
2611+
<dt>two lines
2612+
2613+
<dt>one line and one span
2614+
2615+
<dd> The item has a <a href="#definite"><i>definite grid position</i></a>
2616+
and <a href="#definite0"><i>definite grid span</i></a>.
2617+
2618+
<dt>one line and no span
2619+
2620+
<dd> If the item is a <a href="#subgrid0"><i>subgrid</i></a> in this
2621+
dimension, it has an <a href="#definite"><i>definite grid
2622+
position</i></a> and <a href="#automatic0"><i>automatic grid
2623+
span</i></a>. Otherwise, it has an <a href="#definite"><i>definite grid
2624+
position</i></a> and a <a href="#definite0"><i>definite grid span</i></a>
2625+
of one.
2626+
2627+
<dt>no lines and one span
2628+
2629+
<dt>two spans
2630+
2631+
<dd> The item has an <a href="#automatic"><i>automatic grid
2632+
position</i></a> and an <a href="#definite0"><i>definite grid
2633+
span</i></a>. If two spans were specified, the <i>end</i> span is
2634+
ignored. If the <a href="#grid-span"><i>grid span</i></a> is for a named
2635+
line, it's instead treated as a <a href="#definite0"><i>definite grid
2636+
span</i></a> of one.
2637+
2638+
<dt>no lines and no spans
2639+
2640+
<dd> If the item is a <a href="#subgrid0"><i>subgrid</i></a> in this
2641+
dimension, it has an <a href="#automatic"><i>automatic grid
2642+
position</i></a> and <a href="#automatic0"><i>automatic grid
2643+
span</i></a>. Otherwise, it has an <a href="#automatic"><i>automatic grid
2644+
position</i></a> and a <a href="#definite0"><i>definite grid span</i></a>
2645+
of one.
2646+
</dl>
25972647

25982648
<div class=example>
25992649
<p> Given a single-row, 8-column grid and the following 9 named lines:
@@ -4063,10 +4113,10 @@ <h2 class=no-num id=index> Index</h2>
40634113
<li>auto, <a href="#track-size-auto"
40644114
title="section 5.1."><strong>5.1.</strong></a>
40654115

4066-
<li>automatic grid position, <a href="#automatic-grid-position"
4116+
<li>automatic grid position, <a href="#automatic"
40674117
title="section 7.1."><strong>7.1.</strong></a>
40684118

4069-
<li>automatic grid span, <a href="#automatic-grid-span"
4119+
<li>automatic grid span, <a href="#automatic0"
40704120
title="section 7.1."><strong>7.1.</strong></a>
40714121

40724122
<li>AvailableSpace, <a href="#AvailableSpace-definition"
@@ -4085,6 +4135,12 @@ <h2 class=no-num id=index> Index</h2>
40854135
href="#function-ComputeUsedBreadthOfGridTracks"
40864136
title="section 9.2."><strong>9.2.</strong></a>
40874137

4138+
<li>definite grid position, <a href="#definite"
4139+
title="section 7.1."><strong>7.1.</strong></a>
4140+
4141+
<li>definite grid span, <a href="#definite0"
4142+
title="section 7.1."><strong>7.1.</strong></a>
4143+
40884144
<li><code class=css>dense</code>’, <a href="#dense"
40894145
title="section 6.2."><strong>6.2.</strong></a>
40904146

@@ -4094,12 +4150,6 @@ <h2 class=no-num id=index> Index</h2>
40944150
<li>explicit grid, <a href="#explicit-grid"
40954151
title="section 5."><strong>5.</strong></a>
40964152

4097-
<li>explicit grid position, <a href="#explicit-grid-position"
4098-
title="section 7.1."><strong>7.1.</strong></a>
4099-
4100-
<li>explicit grid span, <a href="#explicit-grid-span"
4101-
title="section 7.1."><strong>7.1.</strong></a>
4102-
41034153
<li><var>&lt;flex></var>, <a href="#ltflex"
41044154
title="section 5.1."><strong>5.1.</strong></a>
41054155

@@ -4168,6 +4218,9 @@ <h2 class=no-num id=index> Index</h2>
41684218
<li>grid-placement property, <a href="#grid-placement-properties"
41694219
title="section 7.1."><strong>7.1.</strong></a>
41704220

4221+
<li>grid position, <a href="#grid-position"
4222+
title="section 7.1."><strong>7.1.</strong></a>
4223+
41714224
<li>grid row, <a href="#rows" title="section 2."><strong>2.</strong></a>
41724225

41734226
<li>grid-row, <a href="#grid-row"
@@ -4260,6 +4313,9 @@ <h2 class=no-num id=index> Index</h2>
42604313
<li>named grid area, <a href="#named-grid-areas"
42614314
title="section 5.2."><strong>5.2.</strong></a>
42624315

4316+
<li>named line, <a href="#named-lines0"
4317+
title="section 5.1.1."><strong>5.1.1.</strong></a>
4318+
42634319
<li>none, <a href="#grid-definition-none"
42644320
title="section 5.1."><strong>5.1.</strong></a>
42654321

@@ -4276,6 +4332,9 @@ <h2 class=no-num id=index> Index</h2>
42764332
<li>participates in baseline alignment, <a href="#baseline-participation"
42774333
title="section 8.5."><strong>8.5.</strong></a>
42784334

4335+
<li>placement, <a href="#placement0"
4336+
title="section 7.1."><strong>7.1.</strong></a>
4337+
42794338
<li>RemainingSpace, <a href="#RemainingSpace-definition"
42804339
title="section 9.1."><strong>9.1.</strong></a>
42814340

0 commit comments

Comments
 (0)