Skip to content

Commit fba7f76

Browse files
rachelandrewrachelandrew
committed
masonry examples
1 parent 87921de commit fba7f76

7 files changed

+601
-0
lines changed

‎grid/masonry/align-tracks.html

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Masonry in the block axis align-tracks</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.grid {
13+
padding: 10px;
14+
border: 2px solid #f76707;
15+
border-radius: 5px;
16+
background-color: #fff4e6;
17+
}
18+
19+
.item {
20+
border: 2px solid #ffa94d;
21+
border-radius: 5px;
22+
background-color: #ffd8a8;
23+
color: #d9480f;
24+
padding: 10px;
25+
}
26+
</style>
27+
28+
<style class="editable">
29+
.grid {
30+
display: grid;
31+
block-size: 250px;
32+
gap: 10px;
33+
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
34+
grid-template-rows: masonry;
35+
align-tracks: end, start, end, space-between;
36+
}
37+
38+
</style>
39+
</head>
40+
41+
<body>
42+
<section class="preview">
43+
<div class="grid">
44+
<div class="item" style="block-size: 2em;"></div>
45+
<div class="item" style="block-size: 3em;"></div>
46+
<div class="item" style="block-size: 1.6em;"></div>
47+
<div class="item" style="block-size: 4em;"></div>
48+
<div class="item" style="block-size: 3.2em;"></div>
49+
<div class="item" style="block-size: 3em;"></div>
50+
<div class="item" style="block-size: 4.5em;"></div>
51+
<div class="item" style="block-size: 1em;"></div>
52+
<div class="item" style="block-size: 3.5em;"></div>
53+
<div class="item" style="block-size: 2.8em;"></div>
54+
</div>
55+
</section>
56+
57+
<textarea class="playable playable-css" style="height: 200px;">
58+
.grid {
59+
display: grid;
60+
block-size: 250px;
61+
gap: 10px;
62+
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
63+
grid-template-rows: masonry;
64+
align-tracks: end, start, end, space-between;
65+
}
66+
67+
</textarea>
68+
69+
<textarea class="playable playable-html" style="height: 250px;">
70+
<div class="grid">
71+
<div class="item" style="block-size: 2em;"></div>
72+
<div class="item" style="block-size: 3em;"></div>
73+
<div class="item" style="block-size: 1.6em;"></div>
74+
<div class="item" style="block-size: 4em;"></div>
75+
<div class="item" style="block-size: 3.2em;"></div>
76+
<div class="item" style="block-size: 3em;"></div>
77+
<div class="item" style="block-size: 4.5em;"></div>
78+
<div class="item" style="block-size: 1em;"></div>
79+
<div class="item" style="block-size: 3.5em;"></div>
80+
<div class="item" style="block-size: 2.8em;"></div>
81+
</div>
82+
</textarea>
83+
84+
<div class="playable-buttons">
85+
<input id="reset" type="button" value="Reset" />
86+
</div>
87+
</body>
88+
<script src="../playable.js"></script>
89+
</html>

‎grid/masonry/block-axis.html

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Masonry in the block axis</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.grid {
13+
padding: 10px;
14+
border: 2px solid #f76707;
15+
border-radius: 5px;
16+
background-color: #fff4e6;
17+
}
18+
19+
.item {
20+
border: 2px solid #ffa94d;
21+
border-radius: 5px;
22+
background-color: #ffd8a8;
23+
color: #d9480f;
24+
}
25+
</style>
26+
27+
<style class="editable">
28+
.grid {
29+
display: grid;
30+
gap: 10px;
31+
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
32+
grid-template-rows: masonry;
33+
}
34+
35+
</style>
36+
</head>
37+
38+
<body>
39+
<section class="preview">
40+
<div class="grid">
41+
<div class="item" style="block-size: 2em;"></div>
42+
<div class="item" style="block-size: 3em;"></div>
43+
<div class="item" style="block-size: 1.6em;"></div>
44+
<div class="item" style="block-size: 4em;"></div>
45+
<div class="item" style="block-size: 2.2em;"></div>
46+
<div class="item" style="block-size: 3em;"></div>
47+
<div class="item" style="block-size: 4.5em;"></div>
48+
<div class="item" style="block-size: 1em;"></div>
49+
<div class="item" style="block-size: 3.5em;"></div>
50+
<div class="item" style="block-size: 2.8em;"></div>
51+
</div>
52+
</section>
53+
54+
<textarea class="playable playable-css" style="height: 150px;">
55+
.grid {
56+
display: grid;
57+
gap: 10px;
58+
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
59+
grid-template-rows: masonry;
60+
}
61+
</textarea>
62+
63+
<textarea class="playable playable-html" style="height: 250px;">
64+
<div class="grid">
65+
<div class="item" style="block-size: 2em;"></div>
66+
<div class="item" style="block-size: 3em;"></div>
67+
<div class="item" style="block-size: 1.6em;"></div>
68+
<div class="item" style="block-size: 4em;"></div>
69+
<div class="item" style="block-size: 2.2em;"></div>
70+
<div class="item" style="block-size: 3em;"></div>
71+
<div class="item" style="block-size: 4.5em;"></div>
72+
<div class="item" style="block-size: 1em;"></div>
73+
<div class="item" style="block-size: 3.5em;"></div>
74+
<div class="item" style="block-size: 2.8em;"></div>
75+
</div>
76+
</textarea>
77+
78+
<div class="playable-buttons">
79+
<input id="reset" type="button" value="Reset" />
80+
</div>
81+
</body>
82+
<script src="../playable.js"></script>
83+
</html>

‎grid/masonry/inline-axis.html

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Masonry in the inline axis</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.grid {
13+
padding: 10px;
14+
border: 2px solid #f76707;
15+
border-radius: 5px;
16+
background-color: #fff4e6;
17+
}
18+
19+
.item {
20+
border: 2px solid #ffa94d;
21+
border-radius: 5px;
22+
background-color: #ffd8a8;
23+
color: #d9480f;
24+
}
25+
</style>
26+
27+
<style class="editable">
28+
.grid {
29+
display: grid;
30+
gap: 10px;
31+
grid-template-columns: masonry;
32+
grid-template-rows: repeat(3, 100px);
33+
}
34+
35+
</style>
36+
</head>
37+
38+
<body>
39+
<section class="preview">
40+
<div class="grid">
41+
<div class="item" style="inline-size: 2em;"></div>
42+
<div class="item" style="inline-size: 3em;"></div>
43+
<div class="item" style="inline-size: 1.6em;"></div>
44+
<div class="item" style="inline-size: 4em;"></div>
45+
<div class="item" style="inline-size: 2.2em;"></div>
46+
<div class="item" style="inline-size: 3em;"></div>
47+
<div class="item" style="inline-size: 4.5em;"></div>
48+
<div class="item" style="inline-size: 1em;"></div>
49+
<div class="item" style="inline-size: 3.5em;"></div>
50+
<div class="item" style="inline-size: 2.8em;"></div>
51+
</div>
52+
</section>
53+
54+
<textarea class="playable playable-css" style="height: 150px;">
55+
.grid {
56+
display: grid;
57+
gap: 10px;
58+
grid-template-columns: masonry;
59+
grid-template-rows: repeat(3, 100px);
60+
}
61+
</textarea>
62+
63+
<textarea class="playable playable-html" style="height: 250px;">
64+
<div class="grid">
65+
<div class="item" style="inline-size: 2em;"></div>
66+
<div class="item" style="inline-size: 3em;"></div>
67+
<div class="item" style="inline-size: 1.6em;"></div>
68+
<div class="item" style="inline-size: 4em;"></div>
69+
<div class="item" style="inline-size: 2.2em;"></div>
70+
<div class="item" style="inline-size: 3em;"></div>
71+
<div class="item" style="inline-size: 4.5em;"></div>
72+
<div class="item" style="inline-size: 1em;"></div>
73+
<div class="item" style="inline-size: 3.5em;"></div>
74+
<div class="item" style="inline-size: 2.8em;"></div>
75+
</div>
76+
</textarea>
77+
78+
<div class="playable-buttons">
79+
<input id="reset" type="button" value="Reset" />
80+
</div>
81+
</body>
82+
<script src="../playable.js"></script>
83+
</html>

‎grid/masonry/justify-tracks.html

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Masonry in the inline axis justify-tracks</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.grid {
13+
padding: 10px;
14+
border: 2px solid #f76707;
15+
border-radius: 5px;
16+
background-color: #fff4e6;
17+
}
18+
19+
.item {
20+
border: 2px solid #ffa94d;
21+
border-radius: 5px;
22+
background-color: #ffd8a8;
23+
color: #d9480f;
24+
}
25+
</style>
26+
27+
<style class="editable">
28+
.grid {
29+
display: grid;
30+
gap: 10px;
31+
grid-template-columns: masonry;
32+
grid-template-rows: repeat(3, 100px);
33+
justify-tracks: end, center, space-around;
34+
}
35+
36+
</style>
37+
</head>
38+
39+
<body>
40+
<section class="preview">
41+
<div class="grid">
42+
<div class="item" style="inline-size: 2em;"></div>
43+
<div class="item" style="inline-size: 3em;"></div>
44+
<div class="item" style="inline-size: 1.6em;"></div>
45+
<div class="item" style="inline-size: 4em;"></div>
46+
<div class="item" style="inline-size: 2.2em;"></div>
47+
<div class="item" style="inline-size: 3em;"></div>
48+
<div class="item" style="inline-size: 4.5em;"></div>
49+
<div class="item" style="inline-size: 1em;"></div>
50+
<div class="item" style="inline-size: 3.5em;"></div>
51+
<div class="item" style="inline-size: 2.8em;"></div>
52+
</div>
53+
</section>
54+
55+
<textarea class="playable playable-css" style="height: 150px;">
56+
.grid {
57+
display: grid;
58+
gap: 10px;
59+
grid-template-columns: masonry;
60+
grid-template-rows: repeat(3, 100px);
61+
justify-tracks: end, center, space-around;
62+
}
63+
</textarea>
64+
65+
<textarea class="playable playable-html" style="height: 250px;">
66+
<div class="grid">
67+
<div class="item" style="inline-size: 2em;"></div>
68+
<div class="item" style="inline-size: 3em;"></div>
69+
<div class="item" style="inline-size: 1.6em;"></div>
70+
<div class="item" style="inline-size: 4em;"></div>
71+
<div class="item" style="inline-size: 2.2em;"></div>
72+
<div class="item" style="inline-size: 3em;"></div>
73+
<div class="item" style="inline-size: 4.5em;"></div>
74+
<div class="item" style="inline-size: 1em;"></div>
75+
<div class="item" style="inline-size: 3.5em;"></div>
76+
<div class="item" style="inline-size: 2.8em;"></div>
77+
</div>
78+
</textarea>
79+
80+
<div class="playable-buttons">
81+
<input id="reset" type="button" value="Reset" />
82+
</div>
83+
</body>
84+
<script src="../playable.js"></script>
85+
</html>

0 commit comments

Comments
 (0)