csswg-drafts/css-grid-1/examples/grid-item-determination.html at define-control · bocoup/csswg-drafts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<style>
/* Grid it */
.container { display: grid; grid-auto-flow: column; }

/* Make it pretty */
div, span {
  margin: 0.125em;
  padding: 0.125em;
  border-radius: 0.25em;
  list-style: none;
  color: white;
  text-align: center;
}
.container { background: #444; float: left; }
.container > * { background: #888; }
</style>


<div class="container">

    <!-- grid item: block child -->
    <div id="item1">block</div>

    <!-- grid item: floated element; floating is ignored -->
    <div id="item2" style="float: left;">float</div>

    <!-- grid item: anonymous block box around inline content -->
    anonymous item 3
    <!-- note that since it has no wrapper element this item can't be styled! -->

    <!-- grid item: inline child -->
    <span>
        item 4
        <!-- grid items do not split around blocks -->
        <q style="display: block" id=not-an-item>item 4</q>
        item 4
    </span>
</div>