Skip to content

Commit acf5bba

Browse files
fantasaifantasai
committed
[css-grid] Add examples to subgrid section. Prep for WD
--HG-- extra : rebase_source : f0093ce4ba3720b251b66ef32845c8b4371fbf5f
1 parent 23d341c commit acf5bba

2 files changed

Lines changed: 187 additions & 110 deletions

File tree

‎css-grid/Overview.html‎

Lines changed: 115 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
33
<title>CSS Grid Layout Module Level 1</title>
44
<link href=../default.css rel=stylesheet type=text/css>
5-
<link href=../csslogo.ico rel="shortcut icon" type=image/x-icon>
6-
<link href=https://www.w3.org/StyleSheets/TR/W3C-ED rel=stylesheet type=text/css>
5+
<link href=https://www.w3.org/StyleSheets/TR/W3C-WD rel=stylesheet type=text/css>
76
</head>
87
<body class=h-entry>
98
<style scoped type=text/css>
@@ -41,15 +40,19 @@
4140
<img alt=W3C height=48 src=http://www.w3.org/Icons/w3c_home width=72>
4241
</a></p>
4342
<h1 class="p-name no-ref" id=title>CSS Grid Layout Module Level 1</h1>
44-
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
45-
<span class=dt-updated><span class=value-title title=20130829>29 August 2013</span></span></span></h2>
46-
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-grid/>http://dev.w3.org/csswg/css-grid/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css3-grid-layout/>http://www.w3.org/TR/css3-grid-layout/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-grid/>http://dev.w3.org/csswg/css-grid/</a>
43+
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Working Draft,
44+
<span class=dt-updated><span class=value-title title=20130905>5 September 2013</span></span></span></h2>
45+
<div data-fill-with=spec-metadata><dl><dt>This version:
46+
<dd><a class=u-url href=http://www.w3.org/TR/2013/WD-css3-grid-layout-20130905/>http://www.w3.org/TR/2013/WD-css3-grid-layout-20130402/</a>
47+
<dt>Latest version:<dd><a href=http://www.w3.org/TR/css3-grid-layout/>http://www.w3.org/TR/css3-grid-layout/</a>
48+
<dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-grid/>http://dev.w3.org/csswg/css-grid/</a>
4749
<dt>Feedback:</dt>
4850
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-grid%5D%20feedback">www-style@w3.org</a>
4951
with subject line
5052
“<kbd>[css-grid] <var>… message topic …</var></kbd>”
5153
(<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)<dt>Test Suite:<dd>None Yet<dt>Editors:
52-
<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://www.xanthir.com/contact/>Tab Atkins Jr.</a> (<span class="p-org org">Google</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://fantasai.inkedblade.net/contact>fantasai</a> (<span class="p-org org">Mozilla</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:ratan@microsoft.com>Rossen Atanassov</a> (<span class="p-org org">Microsoft</span>)<dt>Previous editors:<dd><a href=mailto:alexmog@microsoft.com>Alex Mogilevsky</a>, Microsoft Corporation<dd><a href=mailto:pcupp@microsoft.com>Phil Cupp</a>, Microsoft Corporation<dt>Previous version:<dd>http://www.w3.org/TR/2013/WD-css3-grid-layout-20130402/<dd>http://www.w3.org/TR/2012/WD-css3-grid-layout-20121106/<dt>Issues list:<dd><a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&amp;component=Grid+Layout&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED">In Bugzilla</a></dl></div>
54+
<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://www.xanthir.com/contact/>Tab Atkins Jr.</a> (<span class="p-org org">Google</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://fantasai.inkedblade.net/contact>fantasai</a> (<span class="p-org org">Mozilla</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:ratan@microsoft.com>Rossen Atanassov</a> (<span class="p-org org">Microsoft</span>)<dt>Previous editors:<dd><a href=mailto:alexmog@microsoft.com>Alex Mogilevsky</a>, Microsoft Corporation<dd><a href=mailto:pcupp@microsoft.com>Phil Cupp</a>, Microsoft Corporation
55+
<dt>Previous version:<dd>http://www.w3.org/TR/2013/WD-css3-grid-layout-20130402/<dd>http://www.w3.org/TR/2012/WD-css3-grid-layout-20121106/<dt>Issues list:<dd><a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&amp;component=Grid+Layout&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED">In Bugzilla</a></dl></div>
5356
<div data-fill-with=warning></div>
5457
<p class=copyright data-fill-with=copyright><a href=http://www.w3.org/Consortium/Legal/ipr-notice#Copyright>Copyright</a> © 2013 <a href=http://www.w3.org/><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href=http://www.csail.mit.edu/><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href=http://www.ercim.eu/><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href=http://www.keio.ac.jp/>Keio</a>, <a href=http://ev.buaa.edu.cn/>Beihang</a>), All Rights Reserved. W3C <a href=http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer>liability</a>, <a href=http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks>trademark</a> and <a href=http://www.w3.org/Consortium/Legal/copyright-documents>document use</a> rules apply.</p>
5558
<hr title="Separator for header">
@@ -62,35 +65,42 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=abstract><span class
6265
on screen, on paper, in speech, etc.</p>
6366

6467
<h2 class="no-num no-toc no-ref heading settled heading" id=status><span class=content>Status of this document</span></h2>
65-
<div data-fill-with=status><p>
66-
This is a public copy of the editors' draft.
67-
It is provided for discussion only and may change at any moment.
68-
Its publication here does not imply endorsement of its contents by W3C.
69-
Don’t cite this document other than as work in progress.
70-
71-
<p>
72-
The (<a href=http://lists.w3.org/Archives/Public/www-style/>archived</a>) public mailing list
73-
<a href="mailto:www-style@w3.org?Subject=%5Bcss-grid%5D%20PUT%20SUBJECT%20HERE">www-style@w3.org</a>
74-
(see <a href=http://www.w3.org/Mail/Request>instructions</a>)
75-
is preferred for discussion of this specification.
76-
When sending e-mail,
77-
please put the text “css-grid” in the subject,
78-
preferably like this:
79-
“[css-grid] <em>…summary of comment…</em>”
80-
81-
<p>
82-
This document was produced by the <a href=/Style/CSS/members>CSS Working Group</a>
83-
(part of the <a href=/Style/>Style Activity</a>).
84-
85-
<p>
86-
This document was produced by a group operating under
87-
the <a href=/Consortium/Patent-Policy-20040205/>5 February 2004 W3C Patent Policy</a>.
88-
W3C maintains a <a href=/2004/01/pp-impl/32061/status rel=disclosure>public list of any patent disclosures</a>
89-
made in connection with the deliverables of the group;
90-
that page also includes instructions for disclosing a patent.
91-
An individual who has actual knowledge of a patent which the individual believes contains <a href=/Consortium/Patent-Policy-20040205/#def-essential>Essential Claim(s)</a>
92-
must disclose the information in accordance with <a href=/Consortium/Patent-Policy-20040205/#sec-Disclosure>section 6 of the W3C Patent Policy</a>.</div>
93-
<div data-fill-with=at-risk></div>
68+
69+
<p><em>This section describes the status of this document at the time of
70+
its publication. Other documents may supersede this document. A list of
71+
current W3C publications and the latest revision of this technical report
72+
can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
73+
index at http://www.w3.org/TR/.</a></em>
74+
75+
<p>Publication as a Working Draft does not imply endorsement by the W3C
76+
Membership. This is a draft document and may be updated, replaced or
77+
obsoleted by other documents at any time. It is inappropriate to cite this
78+
document as other than work in progress.
79+
80+
<p>The (<a
81+
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
82+
mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
83+
<a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
84+
for discussion of this specification. When sending e-mail, please put the
85+
text “css-grid” in the subject, preferably like this:
86+
“[<!---->css-grid<!---->] <em>…summary of comment…</em>”
87+
88+
<p>This document was produced by the <a
89+
href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
90+
the <a href="http://www.w3.org/Style/">Style Activity</a>).
91+
92+
<p>This document was produced by a group operating under the <a
93+
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
94+
2004 W3C Patent Policy</a>. W3C maintains a <a
95+
href="http://www.w3.org/2004/01/pp-impl/32061/status"
96+
rel=disclosure>public list of any patent disclosures</a> made in
97+
connection with the deliverables of the group; that page also includes
98+
instructions for disclosing a patent. An individual who has actual
99+
knowledge of a patent which the individual believes contains <a
100+
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
101+
Claim(s)</a> must disclose the information in accordance with <a
102+
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
103+
6 of the W3C Patent Policy</a>.</p>
94104

95105
<h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class=content>Table of contents</span></h2>
96106
<div data-fill-with=table-of-contents><ul class=toc><li><a href=#intro><span class=secno>1</span>
@@ -1070,6 +1080,37 @@ <h4 class="heading settled heading" data-level=5.1.4 id=subgrids><span class=sec
10701080
participate in sizing the <a href=#grid>grid</a> of the parent <a href=#grid-container>grid container</a>,
10711081
allowing the contents of both grids to align.
10721082

1083+
<div class=example>
1084+
<p>
1085+
For example, suppose we have a form consisting of a list of inputs with labels:
1086+
<pre>&lt;ul&gt;
1087+
&lt;li&gt;&lt;label&gt;Name:&lt;/label&gt; &lt;input name=fn&gt;
1088+
&lt;li&gt;&lt;label&gt;Address:&lt;/label&gt; &lt;input name=address&gt;
1089+
&lt;li&gt;&lt;label&gt;Phone:&lt;/label&gt; &lt;input name=phone&gt;
1090+
&lt;/ul&gt;</pre>
1091+
<p>
1092+
We want the labels and inputs to align, and we want to style each list item with a border.
1093+
This can be accomplished with subgrid layout:
1094+
1095+
<pre>ul {
1096+
display: grid;
1097+
grid-auto-flow: rows;
1098+
grid-template-columns: auto 1fr;
1099+
}
1100+
li {
1101+
display: grid;
1102+
grid: subgrid / subgrid;
1103+
margin: 0.5em;
1104+
border: solid;
1105+
padding: 0.5em;
1106+
}
1107+
label {
1108+
grid-column: 1;
1109+
}
1110+
input {
1111+
grid-column: 2;
1112+
}</pre> </div>
1113+
10731114
<p>
10741115
A <a href=#subgrid>subgrid</a> behaves just like a normal <a href=#grid-container>grid container</a> except that:
10751116

@@ -1089,13 +1130,35 @@ <h4 class="heading settled heading" data-level=5.1.4 id=subgrids><span class=sec
10891130
<li>
10901131
The <a href=#subgrid>subgrid</a>’s own grid items participate in the sizing of its parent grid and are aligned to it.
10911132
In this process, the sum of the item’s margin, padding, and borders are applied as an extra layer of margin to the items at those edges.
1133+
1134+
<div class="example">
1135+
<p>For example, if we have a 3&times;3 grid with the following tracks:
1136+
<pre>#parent-grid { grid-template-columns: 300px auto 300px; }</pre>
1137+
<p>If a subgrid covers the last two tracks, its first two columns correspond to the parent grid's last two columns,
1138+
and any items positioned into those tracks participate in sizing the parent grid.
1139+
Specifically, an item positioned in the first track of the subgrid
1140+
influences the auto-sizing of the parent grid's middle track.
1141+
<pre>
1142+
<!-- -->#subgrid { grid-column: 2 / span 2; } /* cover parent's 2nd and 3rd tracks */
1143+
<!-- -->#subgrid :first-child { grid-column: 1; } /* subgrid's 1st track, parent grid's 2nd track */</pre>
1144+
<p>If the subgrid has margins/borders/padding,
1145+
the the size of those margins/borders/padding also influence sizing.
1146+
For example, if the subgrid has 100px padding:
1147+
<pre>#subgrid { padding: 100px; }</pre>
1148+
Then when the parent grid auto-sizes its second track,
1149+
it will be at least 100px wider than any items in the subgrid's first track,
1150+
and any items in the subgrid's second track will be sized to fit a slot 200px wide (instead of 300px wide).
1151+
</div>
1152+
10921153
However, any overflow tracks
10931154
(i.e. those outside the <a href=#explicit-grid>explicit grid</a> when the <a href=#subgrid>subgrid</a> has a <a href=#definite>definite grid span</a>)
10941155
do not correspond to any tracks in the parent grid;
10951156
they effectively extend in a third dimension.
1096-
(For example, if a parent grid has adjacent tracks <var>A</var>, <var>B</var>, and <var>C</var>,
1157+
<div class="example"><p>
1158+
For example, if a parent grid has adjacent tracks <var>A</var>, <var>B</var>, and <var>C</var>,
10971159
and a <span class=css data-link-type=maybe>span 1</span> subgrid with an extra <a href=#implicit-grid-tracks>implicit grid track</a> is placed in track <var>B</var>,
1098-
the items in that <a href=#implicit-grid-tracks>implicit grid track</a> are not considered part of track <var>B</var>.)
1160+
the items in that <a href=#implicit-grid-tracks>implicit grid track</a> are not considered part of track <var>B</var>.
1161+
</div>
10991162

11001163
<li>
11011164
The <a href=#subgrid>subgrid</a> is always stretched;
@@ -1114,40 +1177,21 @@ <h4 class="heading settled heading" data-level=5.1.4 id=subgrids><span class=sec
11141177
these names apply (within the <a href=#subgrid>subgrid</a>) to the corresponding lines of the parent <a href=#grid>grid</a>.
11151178
If the <a href=#subgrid>subgrid</a> has an explicit <a href=#grid-span>grid span</a>,
11161179
any names specified for lines beyond the span are ignored.
1180+
1181+
<div class="example">
1182+
<p>For example, if the subgrid above were specified with 5 names:
1183+
<pre>#subgrid { grid-template-columns: subgrid (first) (second) (third) (fourth) (fifth); }</pre>
1184+
<p>Items within the subgrid could be positioned using the first four line names;
1185+
the last name would be ignored (as if it didn't exist),
1186+
since the subgrid only covers four lines.
1187+
</div>
1188+
11171189
If the <a href=#subgrid>subgrid</a> has an explicit <a href=#grid-position>grid position</a> as well as an explicit <a href=#grid-span>grid span</a>,
11181190
it also automatically receives the line names specified for its parent <a href=#grid>grid</a>.
1119-
</ul>
1120-
1121-
<div class=example>
1122-
<p>
1123-
For example, suppose we have a form consisting of a list of inputs with labels:
1124-
<pre>&lt;ul&gt;
1125-
&lt;li&gt;&lt;label&gt;Name:&lt;/label&gt; &lt;input name=fn&gt;
1126-
&lt;li&gt;&lt;label&gt;Address:&lt;/label&gt; &lt;input name=address&gt;
1127-
&lt;li&gt;&lt;label&gt;Phone:&lt;/label&gt; &lt;input name=phone&gt;
1128-
&lt;/ul&gt;</pre>
1129-
<p>
1130-
We want the labels and inputs to align, and we want to style each list item with a border.
1131-
This can be accomplished with subgrid layout:
1191+
(In such cases the author can rely on the names specified in the parent grid,
1192+
and does not need to duplicate those names in each subgrid declaration.)
11321193

1133-
<pre>ul {
1134-
display: grid;
1135-
grid-auto-flow: rows;
1136-
grid-template-columns: auto 1fr;
1137-
}
1138-
li {
1139-
display: grid;
1140-
grid: subgrid / subgrid;
1141-
margin: 0.5em;
1142-
border: solid;
1143-
padding: 0.5em;
1144-
}
1145-
label {
1146-
grid-column: 1;
1147-
}
1148-
input {
1149-
grid-column: 2;
1150-
}</pre> </div>
1194+
</ul>
11511195

11521196
<h4 class="heading settled heading" data-level=5.1.5 id=resolved-track-list><span class=secno>5.1.5 </span><span class=content>
11531197
Resolved Values</span><a class=self-link href=#resolved-track-list></a></h4>
@@ -1743,7 +1787,7 @@ <h2 class="heading settled heading" data-level=8 id=placement><span class=secno>
17431787
<h3 class="heading settled heading" data-level=8.1 id=line-placement><span class=secno>8.1 </span><span class=content>
17441788
Line-based Placement: the <a class=property data-link-type=propdesc href=#propdef-grid-row-start title=grid-row-start>grid-row-start</a>, <a class=property data-link-type=propdesc href=#propdef-grid-column-start title=grid-column-start>grid-column-start</a>, <a class=property data-link-type=propdesc href=#propdef-grid-row-end title=grid-row-end>grid-row-end</a>, and <a class=property data-link-type=propdesc href=#propdef-grid-column-end title=grid-column-end>grid-column-end</a> properties</span><a class=self-link href=#line-placement></a></h3>
17451789

1746-
<table class=propdef><tr><th>Name:<td><dfn data-dfn-type=property data-export="" id=propdef-grid-row-start>grid-row-start<a class=self-link href=#propdef-grid-row-start></a></dfn>, <dfn data-dfn-type=property data-export="" id=propdef-grid-column-start>grid-column-start<a class=self-link href=#propdef-grid-column-start></a></dfn>, <dfn data-dfn-type=property data-export="" id=propdef-grid-row-end>grid-row-end<a class=self-link href=#propdef-grid-row-end></a></dfn>, <dfn data-dfn-type=property data-export="" id=propdef-grid-column-end>grid-column-end<a class=self-link href=#propdef-grid-column-end></a></dfn><tr><th>Value:<td><a class=production data-link-type=type href=#typedef-grid-line>&lt;grid-line&gt;</a><tr><th>Initial:<td>auto<tr><th>Applies to:<td><a href=#grid-item>grid items</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value (almost)<tr><th>Percentages:<td>n/a</table> <tablee>
1790+
<table class=propdef><tr><th>Name:<td><dfn data-dfn-type=property data-export="" id=propdef-grid-row-start>grid-row-start<a class=self-link href=#propdef-grid-row-start></a></dfn>, <dfn data-dfn-type=property data-export="" id=propdef-grid-column-start>grid-column-start<a class=self-link href=#propdef-grid-column-start></a></dfn>, <dfn data-dfn-type=property data-export="" id=propdef-grid-row-end>grid-row-end<a class=self-link href=#propdef-grid-row-end></a></dfn>, <dfn data-dfn-type=property data-export="" id=propdef-grid-column-end>grid-column-end<a class=self-link href=#propdef-grid-column-end></a></dfn><tr><th>Value:<td><a class=production data-link-type=type href=#typedef-grid-line>&lt;grid-line&gt;</a><tr><th>Initial:<td>auto<tr><th>Applies to:<td><a href=#grid-item>grid items</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value (almost)<tr><th>Percentages:<td>n/a</table>
17471791

17481792
<pre> <dfn data-dfn-for="grid-row-start grid-column-start grid-row-end grid-column-end" data-dfn-type=type data-export="" id=typedef-grid-line><a class=production data-link-type=type href=#typedef-grid-line>&lt;grid-line&gt;</a><a class=self-link href=#typedef-grid-line></a></dfn> =
17491793
auto |
@@ -2935,7 +2979,7 @@ <h2 class="no-num no-ref heading settled heading" id=property-index><span class=
29352979
<tr><th scope=row><a data-property="">grid-area</a><td><a class=production data-link-type=type href=#typedef-grid-line>&lt;grid-line&gt;</a> [ / <a class=production data-link-type=type href=#typedef-grid-line>&lt;grid-line&gt;</a> ]{0,3}<td>see individual properties<td><td>see individual properties<td>see individual properties<td>visual<td><a href=#grid-item>grid items</a><td>see individual properties<td></table></div>
29362980

29372981

2938-
</tablee><h2 class="no-num heading settled" id=issues-index><span class=content>Issues Index</span><a class=self-link href=#issues-index></a></h2><div style="counter-reset: issue"><p class=issue>
2982+
<h2 class="no-num heading settled" id=issues-index><span class=content>Issues Index</span><a class=self-link href=#issues-index></a></h2><div style="counter-reset: issue"><p class=issue>
29392983
We want the ability to collapse grid tracks
29402984
(similar to <a href=http://www.w3.org/TR/css3-flexbox/#visibility-collapse>collapsing flex items</a>
29412985
or <a href=http://www.w3.org/TR/CSS21/tables.html#dynamic-effects>table rows/columns</a>),
@@ -2974,4 +3018,4 @@ <h2 class="no-num no-ref heading settled heading" id=property-index><span class=
29743018
<a href=#issue-a01f80c8> ↵ </a><p class=issue>
29753019
Fill this in.
29763020

2977-
<a href=#issue-b68a497e> ↵ </a></div>
3021+
<a href=#issue-b68a497e> ↵ </a></div>

0 commit comments

Comments
 (0)