Skip to content

Commit e360e2c

Browse files
heycamheycam
committed
[css-grid-3] Import masonry proposal as css-grid-3.
1 parent 07227f8 commit e360e2c

35 files changed

+1376
-0
lines changed

‎css-grid-3/Overview.bs

+611
Large diffs are not rendered by default.

‎css-grid-3/examples/align-tracks-example-1.html

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE HTML>
2+
<!--
3+
Any copyright is dedicated to the Public Domain.
4+
http://creativecommons.org/publicdomain/zero/1.0/
5+
-->
6+
<style>
7+
.grid {
8+
display: inline-grid;
9+
grid: masonry / 50px 80px;
10+
gap: 3px;
11+
padding: 10px;
12+
border: 3px solid;
13+
height: 100px;
14+
background: lightgrey content-box;
15+
}
16+
item { background: lime; height:20px; }
17+
item:nth-child(1) { border:10px solid; margin: 10px 0 5px 3px; }
18+
</style>
19+
20+
<table border=1>
21+
<tr><th>align-tracks: normal<th>align-tracks: space-between<th>align-tracks: end
22+
<tr><td>
23+
<pre>align-content: normal</pre>
24+
<div class="grid" style="align-tracks: normal; align-content: normal">
25+
<item>1</item>
26+
<item>2</item>
27+
<item>3</item>
28+
</div><td>
29+
<pre>align-content: normal</pre>
30+
<div class="grid" style="align-tracks: space-between; align-content: normal">
31+
<item>1</item>
32+
<item>2</item>
33+
<item>3</item>
34+
</div><td>
35+
<pre>align-content: normal</pre>
36+
<div class="grid" style="align-tracks: end; align-content: normal">
37+
<item>1</item>
38+
<item>2</item>
39+
<item>3</item>
40+
</div>
41+
42+
43+
<tr><td>
44+
<pre>align-content: start</pre>
45+
<div class="grid" style="align-tracks: normal; align-content: start">
46+
<item>1</item>
47+
<item>2</item>
48+
<item>3</item>
49+
</div><td>
50+
<pre>align-content: start</pre>
51+
<div class="grid" style="align-tracks: space-between; align-content: start">
52+
<item>1</item>
53+
<item>2</item>
54+
<item>3</item>
55+
</div><td>
56+
<pre>align-content: start</pre>
57+
<div class="grid" style="align-tracks: end; align-content: start">
58+
<item>1</item>
59+
<item>2</item>
60+
<item>3</item>
61+
</div>
62+
63+
64+
<tr><td>
65+
<pre>align-content: center</pre>
66+
<div class="grid" style="align-tracks: normal; align-content: center">
67+
<item>1</item>
68+
<item>2</item>
69+
<item>3</item>
70+
</div><td>
71+
<pre>align-content: center</pre>
72+
<div class="grid" style="align-tracks: space-between; align-content: center">
73+
<item>1</item>
74+
<item>2</item>
75+
<item>3</item>
76+
</div><td>
77+
<pre>align-content: center</pre>
78+
<div class="grid" style="align-tracks: end; align-content: center">
79+
<item>1</item>
80+
<item>2</item>
81+
<item>3</item>
82+
</div>
83+
84+
85+
<tr><td>
86+
<pre>align-content: end</pre>
87+
<div class="grid" style="align-tracks: normal; align-content: end">
88+
<item>1</item>
89+
<item>2</item>
90+
<item>3</item>
91+
</div><td>
92+
<pre>align-content: end</pre>
93+
<div class="grid" style="align-tracks: space-between; align-content: end">
94+
<item>1</item>
95+
<item>2</item>
96+
<item>3</item>
97+
</div><td>
98+
<pre>align-content: end</pre>
99+
<div class="grid" style="align-tracks: end; align-content: end">
100+
<item>1</item>
101+
<item>2</item>
102+
<item>3</item>
103+
</div>
104+
</table>
105+

‎css-grid-3/examples/align-tracks-example-2.html

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE HTML>
2+
<!--
3+
Any copyright is dedicated to the Public Domain.
4+
http://creativecommons.org/publicdomain/zero/1.0/
5+
-->
6+
<style>
7+
.grid {
8+
display: inline-grid;
9+
grid: masonry / 150px 100px 50px;
10+
gap: 3px;
11+
padding: 10px;
12+
border: 3px solid;
13+
background: lightgrey content-box;
14+
align-tracks: stretch;
15+
height: 150px;
16+
transition: height 6s linear;
17+
}
18+
item {
19+
display: list-item;
20+
list-style-type: decimal;
21+
list-style-position: inside;
22+
background: grey;
23+
height: 20px;
24+
position: relative;
25+
}
26+
item:nth-child(2n) { background:purple; height:auto; }
27+
item:nth-child(1) { border:10px solid; margin: 10px 0 5px 3px; }
28+
z { display: block; background: yellow; height: 20%; width:80%; }
29+
a {
30+
position: absolute;
31+
inset: 0;
32+
top: auto;
33+
border: 2px solid lime;
34+
}
35+
</style>
36+
37+
<body onload="[...document.querySelectorAll('.grid')].forEach(e=>e.style.height='500px')">
38+
<div class="grid">
39+
<item></item>
40+
<item></item>
41+
<item></item>
42+
<item style="max-height:40px; margin-top: 10px">40px</item>
43+
<item></item>
44+
<item><a></a></item>
45+
<item></item>
46+
<item style="writing-mode:vertical-lr">vertical</item>
47+
<item><a></a></item>
48+
<item>A<br>B</item>
49+
<item></item>
50+
<item><z></z></item>
51+
<item></item>
52+
<item><z></z><a></a></item>
53+
<item></item>
54+
<item style="align-self:end"></item>
55+
<item></item>
56+
<item style="margin:auto 0; align-self:start"></item>
57+
<item></item>
58+
<item style="margin-top: auto"></item>
59+
</div><td>

‎css-grid-3/examples/balloon-1.webp

25 KB
Binary file not shown.

‎css-grid-3/examples/balloon-2.webp

45.8 KB
Binary file not shown.

‎css-grid-3/examples/fragmentation-block-axis-example.html

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE HTML>
2+
3+
<style>
4+
.columns {
5+
columns: 3;
6+
column-fill: auto;
7+
height: 400px;
8+
transition: height 20s linear;
9+
background: lightgrey;
10+
}
11+
12+
.grid {
13+
display: grid;
14+
grid: masonry / 100px auto 100px;
15+
border: 1px solid;
16+
gap: 10px;
17+
}
18+
19+
.grid > * {
20+
background: cyan;
21+
height: 20px;
22+
break-inside: avoid;
23+
}
24+
.grid > :nth-child(4n) {
25+
background: blue;
26+
height: 60px;
27+
break-inside: auto;
28+
}
29+
.grid > :nth-child(5n) {
30+
background: pink;
31+
height: 40px;
32+
break-inside: avoid;
33+
}
34+
</style>
35+
36+
<body onload="[...document.querySelectorAll('.columns')].forEach(e=>e.style.height='15px')">
37+
<div class=columns>
38+
<div class="grid">
39+
<x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
40+
<x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
41+
</div>
42+
</div>
43+
44+
</body>
45+
</html>

‎css-grid-3/examples/fragmentation-inline-axis-example.html

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE HTML>
2+
3+
<style>
4+
.columns {
5+
columns: 3;
6+
column-fill: auto;
7+
height: 100px;
8+
transition: height 2s linear;
9+
background: lightgrey;
10+
}
11+
12+
.grid {
13+
display: grid;
14+
grid: 20px auto 30px / masonry;
15+
border: 1px solid;
16+
gap: 10px;
17+
}
18+
19+
.grid > * {
20+
background: cyan;
21+
width: 20px;
22+
min-height: 10px;
23+
}
24+
.grid > :nth-child(4n) {
25+
background: blue;
26+
width: 60px;
27+
}
28+
.grid > :nth-child(3n) {
29+
background: lime;
30+
width: 40px;
31+
}
32+
</style>
33+
34+
<body onload="[...document.querySelectorAll('.columns')].forEach(e=>e.style.height='40px')">
35+
<div class=columns>
36+
<div class="grid">
37+
<x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
38+
</div>
39+
</div>
40+
41+
</body>
42+
</html>

‎css-grid-3/examples/graceful-degradation-example.html

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE HTML>
2+
<!--
3+
Any copyright is dedicated to the Public Domain.
4+
http://creativecommons.org/publicdomain/zero/1.0/
5+
-->
6+
<style>
7+
.grid {
8+
display: inline-grid;
9+
grid-template-rows: masonry;
10+
grid-template-columns: 150px 100px 50px;
11+
gap: 3px;
12+
padding: 10px;
13+
border: 3px solid;
14+
background: lightgrey content-box;
15+
align-tracks: stretch;
16+
height: 150px;
17+
transition: height 6s linear;
18+
}
19+
item {
20+
display: list-item;
21+
list-style-type: decimal;
22+
list-style-position: inside;
23+
background: grey;
24+
height: 20px;
25+
position: relative;
26+
}
27+
item:nth-child(2n) { background:purple; height:auto; }
28+
item:nth-child(1) { border:10px solid; margin: 10px 0 5px 3px; }
29+
z { display: block; background: yellow; height: 20%; width:80%; }
30+
a {
31+
position: absolute;
32+
inset: 0;
33+
top: auto;
34+
border: 2px solid lime;
35+
}
36+
</style>
37+
38+
<body onload="[...document.querySelectorAll('.grid')].forEach(e=>e.style.height='500px')">
39+
<div class="grid">
40+
<item></item>
41+
<item></item>
42+
<item></item>
43+
<item style="max-height:40px; margin-top: 10px">40px</item>
44+
<item></item>
45+
<item><a></a></item>
46+
<item></item>
47+
<item style="writing-mode:vertical-lr">vertical</item>
48+
<item><a></a></item>
49+
<item>A<br>B</item>
50+
<item></item>
51+
<item><z></z></item>
52+
<item></item>
53+
<item><z></z><a></a></item>
54+
<item></item>
55+
<item style="align-self:end"></item>
56+
<item></item>
57+
<item style="margin:auto 0"></item>
58+
<item></item>
59+
<item style="margin-top: auto"></item>
60+
</div><td>

‎css-grid-3/examples/grid-intrinsic-sizing-example-1.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<style>
3+
.grid {
4+
display: inline-grid;
5+
grid: masonry / 50px 100px auto;
6+
grid-gap: 10px;
7+
border: 1px solid;
8+
}
9+
item { background: silver; margin: 5px; }
10+
</style>
11+
12+
<div class="grid">
13+
<item style="border:10px solid">1</item>
14+
<item>2</item>
15+
<item>3</item>
16+
<item style="height:50px">4</item>
17+
<item>5</item>
18+
<item>6</item>
19+
</div>

‎css-grid-3/examples/justify-tracks-example-1.html

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE HTML>
2+
<!--
3+
Any copyright is dedicated to the Public Domain.
4+
http://creativecommons.org/publicdomain/zero/1.0/
5+
-->
6+
<style>
7+
.grid {
8+
display: inline-grid;
9+
grid: 150px 100px 50px / masonry;
10+
gap: 3px;
11+
padding: 10px;
12+
border: 3px solid;
13+
background: lightgrey content-box;
14+
justify-tracks: stretch;
15+
width: 150px;
16+
transition: width 6s linear;
17+
}
18+
item {
19+
display: list-item;
20+
list-style-type: decimal;
21+
list-style-position: inside;
22+
background: grey;
23+
width: 3ch;
24+
position: relative;
25+
}
26+
item:nth-child(2n) { background:purple; width:auto; }
27+
item:nth-child(1) { border:10px solid; margin: 10px 0 5px 3px; }
28+
z { display: block; background: yellow; width: 20%; height:10%; }
29+
a {
30+
position: absolute;
31+
inset: 0;
32+
left: auto;
33+
border: 2px solid lime;
34+
}
35+
</style>
36+
37+
<body onload="[...document.querySelectorAll('.grid')].forEach(e=>e.style.width='600px')">
38+
<div class="grid">
39+
<item></item>
40+
<item></item>
41+
<item></item>
42+
<item style="max-width:80px; margin-right: 10px">80px</item>
43+
<item></item>
44+
<item><a></a></item>
45+
<item></item>
46+
<item style="writing-mode:vertical-lr">vertical</item>
47+
<item><a></a></item>
48+
<item>A<br>B</item>
49+
<item></item>
50+
<item><z></z></item>
51+
<item></item>
52+
<item><z></z><a></a></item>
53+
<item></item>
54+
<item style="justify-self:start"></item>
55+
<item></item>
56+
<item style="margin:0 auto"></item>
57+
<item></item>
58+
<item style="margin-left: auto"></item>
59+
</div><td>

0 commit comments

Comments
 (0)