Skip to content

Commit 2ab66a9

Browse files
tabatkinstabatkins
committed
[css-grid] Write good example + diagram for abspos grid items.
1 parent 57752f3 commit 2ab66a9

2 files changed

Lines changed: 60 additions & 76 deletions

File tree

‎css-grid/Overview.html‎

Lines changed: 32 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -80,14 +80,14 @@
8080
</p>
8181
<h1 class="p-name no-ref" id=title>CSS Grid Layout Module Level 1</h1>
8282
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
83-
<span class=dt-updated><span class=value-title title=20131202>2 December 2013</span></span></span></h2>
83+
<span class=dt-updated><span class=value-title title=20140114>14 January 2014</span></span></span></h2>
8484
<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><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2013/WD-css3-grid-layout-20130402/ rel=previous>http://www.w3.org/TR/2013/WD-css3-grid-layout-20130402/</a><dd><a href=http://www.w3.org/TR/2012/WD-css3-grid-layout-20121106/ rel=previous>http://www.w3.org/TR/2012/WD-css3-grid-layout-20121106/</a>
8585
<dt>Feedback:</dt>
8686
<dd><a href="mailto:www-style@w3.org?subject=%5Bcss-grid%5D%20feedback">www-style@w3.org</a>
8787
with subject line
8888
“<kbd>[css-grid] <var>… message topic …</var></kbd>”(<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)<dt>Test Suite:<dd>None Yet<dt>Editors:
8989
<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>Former Editors:
90-
<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:></a><a href=mailto:alexmog@microsoft.com>Alex Mogilevsky</a> (<span class="p-org org">Microsoft Corporation</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:></a><a href=mailto:pcupp@microsoft.com>Phil Cupp</a> (<span class="p-org org">Microsoft Corporation</span>)<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>
90+
<dd class="p-author h-card vcard"><span class="p-name fn"><a href=mailto:alexmog@microsoft.com>Alex Mogilevsky</a></span> (<span class="p-org org">Microsoft Corporation</span>)<dd class="p-author h-card vcard"><span class="p-name fn"><a href=mailto:pcupp@microsoft.com>Phil Cupp</a></span> (<span class="p-org org">Microsoft Corporation</span>)<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>
9191
<div data-fill-with=warning></div>
9292
<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.
9393
</p>
@@ -1009,7 +1009,7 @@ <h4 class="heading settled heading" data-level=5.1.2 id=repeat-notation><span cl
10091009
This is just a syntactic shorthand that allows writing a large number of columns or rows that exhibit a recurring pattern in a more compact form.
10101010
The syntax of the <a class=css data-link-type=maybe href=#funcdef-repeat title=repeat()>repeat()</a> notation is:
10111011

1012-
<pre class=prod><dfn class=css-code data-dfn-type=function data-export="" id=funcdef-repeat title=repeat()>repeat()<a class=self-link href=#funcdef-repeat></a></dfn> = repeat( <a class="production css-code" data-link-type=type title="<positive-integer>">&lt;positive-integer&gt;</a> , [ <a class="production css-code" data-link-type=type href=#typedef-line-names title="<line-names>">&lt;line-names&gt;</a>? <a class="production css-code" data-link-type=type href=#typedef-track-size title="<track-size>">&lt;track-size&gt;</a> ]+ <a class="production css-code" data-link-type=type href=#typedef-line-names title="<line-names>">&lt;line-names&gt;</a>? )</pre>
1012+
<pre class=prod><dfn class=css-code data-dfn-type=function data-export="" id=funcdef-repeat>repeat()<a class=self-link href=#funcdef-repeat></a></dfn> = repeat( <a class="production css-code" data-link-type=type title="<positive-integer>">&lt;positive-integer&gt;</a> , [ <a class="production css-code" data-link-type=type href=#typedef-line-names title="<line-names>">&lt;line-names&gt;</a>? <a class="production css-code" data-link-type=type href=#typedef-track-size title="<track-size>">&lt;track-size&gt;</a> ]+ <a class="production css-code" data-link-type=type href=#typedef-line-names title="<line-names>">&lt;line-names&gt;</a>? )</pre>
10131013
<p>
10141014
The first argument specifies the number of repetitions.
10151015
The second argument is a <a data-link-type=dfn href=#track-list title="track list">track list</a>,
@@ -2249,10 +2249,14 @@ <h3 class="heading settled heading" data-level=8.4 id=abspos-items><span class=s
22492249

22502250
<p> If an absolutely positioned element’s <a data-link-type=dfn title="containing block">containing block</a>
22512251
is generated by a <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>,
2252-
the <a data-link-type=dfn href=#grid-placement-property title="grid-placement properties">grid-placement properties</a> can be used to constrain it to a particular <a data-link-type=dfn href=#grid-area title="grid area">grid area</a>,
2253-
similar to how they affect regular <a data-link-type=dfn href=#grid-item title="grid items">grid items</a>.
2252+
its containing block edges are the edges of the element’s <a data-link-type=dfn href=#grid-area title="grid area">grid area</a>
2253+
as given by its <a data-link-type=dfn href=#grid-placement-property title="grid-placement properties">grid-placement properties</a>.
22542254
In this case, an <a class=css-code data-link-for="<grid-line>" data-link-type=value href=#grid-placement-auto title=auto>auto</a> value for a <a data-link-type=dfn href=#grid-placement-property title="grid-placement property">grid-placement property</a>
2255-
indicates the corresponding padding edge of the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>.
2255+
contributes the corresponding padding edge of the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a> as a line.
2256+
(Thus, by default, the <a data-link-type=dfn title="containing block">containing block</a> will correspond to the padding edges of the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>.)
2257+
The offset properties (<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#top title=top>top</a>/<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#right title=right>right</a>/<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#bottom title=bottom>bottom</a>/<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#left title=left>left</a>)
2258+
then indicate offsets inwards from the corresponding edges
2259+
of the resulting <a data-link-type=dfn title="containing block">containing block</a>, as normal.
22562260

22572261
<p class=note> Note: Note that, while absolutely-positioning an element to a <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>
22582262
does allow it to align to that container’s <a data-link-type=dfn href=#grid-line title="grid lines">grid lines</a>,
@@ -2261,35 +2265,32 @@ <h3 class="heading settled heading" data-level=8.4 id=abspos-items><span class=s
22612265

22622266
<div class=example>
22632267
<pre> .grid {
2264-
display: grid;
2265-
grid: ...;
2266-
position: relative; /* containing block */
2267-
}
2268-
.abspos {
2269-
position: absolute;
2270-
top: 0;
2271-
left: 0;
2272-
right: 0;
2273-
bottom: 0;
2274-
grid-row: 2 / -1;
2275-
grid-column:
2276-
}
2277-
</pre> </div>
2278-
2279-
<div class=issue id=issue-680ebd0a><a class=self-link href=#issue-680ebd0a></a>
2280-
<ul>
2281-
<li>Simple example of abspos spanning the whole grid.
2282-
<li>Example of abspos spanning a portion of the grid.
2283-
<li>Example of abspos using its offsets.
2284-
<li>Complex example of a centered grid interacting with abspos doing both padding-edge and explicit lines.
2285-
<pre> .grid {
2268+
grid: 10rem 10rem 10rem 10rem / 1fr 1fr 1fr 1fr;
2269+
/* 4 columns of <span class=css data-link-type=maybe title=10rem>10rem</span> each,
2270+
4 equal-height rows filling the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a> */
22862271
justify-content: center;
2272+
/* center the grid horizontally within the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a> */
2273+
position: relative;
2274+
/* Establish abspos <a data-link-type=dfn title="containing block">containing block</a> */
22872275
}
2276+
22882277
.abspos {
2289-
grid-row: 2 / -1;
2290-
grid-column: auto / span 2;
2278+
grid-row-start: 1; /* 1st grid row line = top of grid container */
2279+
grid-row-end: span 2; /* 3rd grid row line */
2280+
grid-column-start: 3; /* 3rd grid col line */
2281+
grid-column-end: auto; /* right padding edge */
2282+
/* <a data-link-type=dfn title="containing block">Containing block</a> covers the top right quadrant of the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a> */
2283+
2284+
position: absolute;
2285+
top: 70px;
2286+
bottom: 40px;
2287+
left: 100px;
2288+
right: 30px;
22912289
}
2292-
</pre> </ul>
2290+
</pre>
2291+
<figure>
2292+
<img height=402 src=images/abspos-grid.svg width=702>
2293+
</figure>
22932294
</div>
22942295

22952296
<h2 class="heading settled heading" data-level=9 id=alignment><span class=secno>9 </span><span class=content>
@@ -3308,22 +3309,6 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
33083309

33093310

33103311
<a href=#issue-79f78d52> ↵ </a></div><div class=issue>
3311-
<ul>
3312-
<li>Simple example of abspos spanning the whole grid.
3313-
<li>Example of abspos spanning a portion of the grid.
3314-
<li>Example of abspos using its offsets.
3315-
<li>Complex example of a centered grid interacting with abspos doing both padding-edge and explicit lines.
3316-
<pre> .grid {
3317-
justify-content: center;
3318-
}
3319-
.abspos {
3320-
grid-row: 2 / -1;
3321-
grid-column: auto / span 2;
3322-
}
3323-
</pre> </ul>
3324-
<a href=#issue-680ebd0a> ↵ </a></div>
3325-
3326-
<div class=issue>
33273312
Provide a picture as example.
33283313

33293314
<a href=#issue-ca7aec73> ↵ </a></div><div class=issue>

‎css-grid/Overview.src.html‎

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2300,10 +2300,14 @@ <h3 id="abspos-items">
23002300

23012301
If an absolutely positioned element's <a>containing block</a>
23022302
is generated by a <a>grid container</a>,
2303-
the <a>grid-placement properties</a> can be used to constrain it to a particular <a>grid area</a>,
2304-
similar to how they affect regular <a>grid items</a>.
2303+
its containing block edges are the edges of the element's <a>grid area</a>
2304+
as given by its <a>grid-placement properties</a>.
23052305
In this case, an <a value for="<grid-line>">auto</a> value for a <a>grid-placement property</a>
2306-
indicates the corresponding padding edge of the <a>grid container</a>.
2306+
contributes the corresponding padding edge of the <a>grid container</a> as a line.
2307+
(Thus, by default, the <a>containing block</a> will correspond to the padding edges of the <a>grid container</a>.)
2308+
The offset properties ('top'/'right'/'bottom'/'left')
2309+
then indicate offsets inwards from the corresponding edges
2310+
of the resulting <a>containing block</a>, as normal.
23072311

23082312
Note: Note that, while absolutely-positioning an element to a <i>grid container</i>
23092313
does allow it to align to that container's <i>grid lines</i>,
@@ -2313,38 +2317,33 @@ <h3 id="abspos-items">
23132317
<div class='example'>
23142318
<pre>
23152319
.grid {
2316-
display: grid;
2317-
grid: ...;
2318-
position: relative; /* containing block */
2320+
grid: 10rem 10rem 10rem 10rem / 1fr 1fr 1fr 1fr;
2321+
/* 4 columns of ''10rem'' each,
2322+
4 equal-height rows filling the <a>grid container</a> */
2323+
justify-content: center;
2324+
/* center the grid horizontally within the <a>grid container</a> */
2325+
position: relative;
2326+
/* Establish abspos <a>containing block</a> */
23192327
}
2328+
23202329
.abspos {
2330+
grid-row-start: 1; /* 1st grid row line = top of grid container */
2331+
grid-row-end: span 2; /* 3rd grid row line */
2332+
grid-column-start: 3; /* 3rd grid col line */
2333+
grid-column-end: auto; /* right padding edge */
2334+
/* <a>Containing block</a> covers the top right quadrant of the <a>grid container</a> */
2335+
23212336
position: absolute;
2322-
top: 0;
2323-
left: 0;
2324-
right: 0;
2325-
bottom: 0;
2326-
grid-row: 2 / -1;
2327-
grid-column:
2337+
top: 70px;
2338+
bottom: 40px;
2339+
left: 100px;
2340+
right: 30px;
23282341
}
23292342
</pre>
2330-
</div>
23312343

2332-
<div class='issue'>
2333-
<ul>
2334-
<li>Simple example of abspos spanning the whole grid.
2335-
<li>Example of abspos spanning a portion of the grid.
2336-
<li>Example of abspos using its offsets.
2337-
<li>Complex example of a centered grid interacting with abspos doing both padding-edge and explicit lines.
2338-
<pre>
2339-
.grid {
2340-
justify-content: center;
2341-
}
2342-
.abspos {
2343-
grid-row: 2 / -1;
2344-
grid-column: auto / span 2;
2345-
}
2346-
</pre>
2347-
</ul>
2344+
<figure>
2345+
<img src="images/abspos-grid.svg" width="702" height="402" >
2346+
</figure>
23482347
</div>
23492348

23502349
<h2 id='alignment'>

0 commit comments

Comments
 (0)