forked from w3c/csswg-drafts
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmasonry-axis-baseline-alignment-1.html
90 lines (77 loc) · 2.96 KB
/
masonry-axis-baseline-alignment-1.html
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<style>
html,body {
color:black; background-color:white; font:15px/1 monospace;
}
.grid {
display: inline-grid;
grid: masonry / repeat(10,auto);
gap: 3px 1px;
border: 2px solid;
height: 400px;
align-content: center;
masonry-auto-flow: ordered next;
vertical-align: top;
}
.fb, .lb { background: olive; }
item > div {
text-decoration: underline red;
text-decoration-thickness: 1px;
text-underline-offset: 0;
text-decoration-skip-ink: none;
}
x { height: 20px; background: grey; opacity:.5; }
x:nth-of-type(2) { height: 30px; }
.fb { align-content: baseline; }
.lb { align-content: last baseline; }
.large { font-size:72pt; }
.lb.large { font-size:64pt; }
.medium { font-size:48pt; }
</style>
<body>
<div class="grid">
<item class="fb" style="padding-bottom: 5px"><div>F</div>x</item>
<item class="fb large"><div>F</div>x</item>
<item class="fb medium"><div>F</div></item>
<x> </x><x> </x><x> </x>
<item class="fb large" style="padding-bottom: 5px; grid-column:9"><div>F</div>x</item>
<item class="fb medium" style="grid-column:10"><div>F</div></item>
<x> </x><x> </x><x> </x>
<x> </x><x> </x><x> </x>
<x> </x><x> </x><x> </x>
<x> </x><x> </x><x> </x>
<x> </x><x> </x><x> </x>
<x> </x><x> </x><x> </x>
<x> </x><x> </x><x> </x>
<item class="fb large" style="padding-bottom: 5px; grid-column:4"><div>F</div>x</item>
<item class="fb medium" style="grid-column:5"><div>F</div></item>
<item class="fb" style="padding-bottom: 15px; grid-column:6"><div>F</div>x</item>
<item class="fb large" style="grid-column:7"><div>F</div></item>
<item class="fb medium" style="grid-column:8; margin-top:auto"><div>F</div></item>
</div>
<div class="grid">
<item class="lb" style="padding-bottom: 5px">x<div>L</div></item>
<item class="lb large">x<div>L</div></item>
<item class="lb medium"><div>L</div></item>
<x> </x><x> </x><x> </x>
<item class="lb large" style="padding-bottom: 5px; grid-column:9">x<div>L</div></item>
<item class="lb medium" style="grid-column:10"><div>L</div></item>
<x> </x><x> </x><x> </x>
<x> </x><x> </x><x> </x>
<x> </x><x> </x><x> </x>
<x> </x><x> </x><x> </x>
<x> </x><x> </x><x> </x>
<x> </x><x> </x><x> </x>
<x> </x><x> </x><x> </x>
<item class="lb" style="padding-bottom: 5px; grid-column:4">x<div>L</div></item>
<item class="lb medium" style="grid-column:5"><div>L</div></item>
<item class="lb" style="padding-bottom: 15px; grid-column:6">x<div>L</div></item>
<item class="lb large" style="grid-column:7"><div>L</div></item>
<item class="lb medium" style="grid-column:8; margin-top:auto"><div>L</div></item>
</div>
</body>
</html>