Skip to content

Commit 08ca3dd

Browse files
fantasaifantasai
committed
[css-grid] Copy over flex item determination examples, to incorporate updates.
1 parent f592702 commit 08ca3dd

3 files changed

Lines changed: 84 additions & 17 deletions

File tree

‎css-grid/Overview.bs‎

Lines changed: 45 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -670,27 +670,55 @@ Grid Items</h2>
670670
is not rendered, as if it were ''display:none''.
671671

672672
<div class="example">
673-
Examples of grid items:
674-
<pre>
675-
&lt;div style="display:grid">
673+
<p>Examples of grid items:
674+
<pre class="lang-markup">
675+
&lt;div style="display:grid">
676+
677+
&lt;!-- grid item: block child -->
678+
&lt;div id="item1">block&lt;/div>
676679

677-
&lt;!-- grid item: block child -->
678-
&lt;div id="item1">block&lt;/div>
680+
&lt;!-- grid item: floated element; floating is ignored -->
681+
&lt;div id="item2" style="float: left;">float&lt;/div>
679682

680-
&lt;!-- grid item: floated element; floating is ignored -->
681-
&lt;div id="item2" style="float: left;">float&lt;/div>
683+
&lt;!-- grid item: anonymous block box around inline content -->
684+
anonymous item 3
685+
686+
&lt;!-- grid item: inline child -->
687+
&lt;span>
688+
item 4
689+
&lt;!-- grid items do not <a href="http://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level">split</a> around blocks -->
690+
&lt;q style="display: block" id=not-an-item>item 4&lt;/q>
691+
item 4
692+
&lt;/span>
693+
&lt;/div>
694+
</pre>
695+
696+
<figure>
697+
<figcaption>grid items determined from above code block</figcaption>
698+
<a href="examples/grid-item-determination.html">
699+
<object type="image/png" data="images/grid-item-determination.png">
700+
<ol>
701+
<li>grid item containing <samp>block</samp>.
702+
<li>grid item containing <samp>float</samp>.
703+
<li>(Anonymous, unstyleable) grid item containing <samp>anonymous item 3</samp>.
704+
<li>grid item containing three blocks in succession:
705+
<ul>
706+
<li>Anonymous block containing <samp>item 4</samp>.
707+
<li><code>&lt;q></code> element block containing <samp>item 4</samp>.
708+
<li>Anonymous block containing <samp>item 4</samp>.
709+
</ul>
710+
</ol>
711+
</object>
712+
</a>
713+
</figure>
682714

683-
&lt;!-- grid item: anonymous block box around inline content -->
684-
anonymous item 3
715+
Note that the inter-element white space disappears:
716+
it does not become its own grid item,
717+
even though the inter-element text <em>does</em> get wrapped in an anonymous grid item.
685718

686-
&lt;!-- grid item: inline child -->
687-
&lt;span>
688-
item 4
689-
&lt;!-- grid items do not split around blocks -->
690-
&lt;div id=not-an-item>item 4&lt;/div>
691-
item 4
692-
&lt;/span>
693-
&lt;/div></pre>
719+
Note also that the anonymous item's box is unstyleable,
720+
since there is no element to assign style rules to.
721+
Its contents will however inherit styles (such as font settings) from the grid container.
694722
</div>
695723

696724
A <a>grid item</a> establishes a new formatting context for its contents.

‎css-grid/examples/grid-item-determination.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<style>
3+
/* Grid it */
4+
.container { display: grid; grid-auto-flow: column; }
5+
6+
/* Make it pretty */
7+
div, span {
8+
margin: 0.125em;
9+
padding: 0.125em;
10+
border-radius: 0.25em;
11+
list-style: none;
12+
color: white;
13+
text-align: center;
14+
}
15+
.container { background: #444; float: left; }
16+
.container > * { background: #888; }
17+
</style>
18+
19+
20+
<div class="container">
21+
22+
<!-- grid item: block child -->
23+
<div id="item1">block</div>
24+
25+
<!-- grid item: floated element; floating is ignored -->
26+
<div id="item2" style="float: left;">float</div>
27+
28+
<!-- grid item: anonymous block box around inline content -->
29+
anonymous item 3
30+
<!-- note that since it has no wrapper element this item can't be styled! -->
31+
32+
<!-- grid item: inline child -->
33+
<span>
34+
item 4
35+
<!-- grid items do not split around blocks -->
36+
<q style="display: block" id=not-an-item>item 4</q>
37+
item 4
38+
</span>
39+
</div>

‎css-grid/images/grid-item-determination.png‎

3.23 KB
Loading

0 commit comments

Comments
 (0)