Skip to content

Commit 058f949

Browse files
captainbrossetcaptainbrosset
committed
masonry is awesome
1 parent 32d9581 commit 058f949

File tree

1 file changed

+68
-0
lines changed

1 file changed

+68
-0
lines changed

‎css-masonry/masonry.html

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>MASONRY</title>
8+
<style>
9+
body {
10+
--size: 4rem;
11+
--main-color: #9fa8da;
12+
13+
font-family: monospace;
14+
font-size: 20pt;
15+
margin: var(--size) auto;
16+
padding: 0 var(--size);
17+
max-width: 1200px;
18+
19+
display: masonry;
20+
grid-template-columns: repeat(auto-fill, var(--size));
21+
gap: 1rem;
22+
}
23+
24+
span {
25+
width: var(--size);
26+
height: var(--size);
27+
background: var(--main-color);
28+
font-size: calc(var(--size) - 1rem);
29+
display: grid;
30+
place-items: center;
31+
}
32+
33+
span.space {
34+
background: color-mix(in srgb, var(--main-color), white);
35+
}
36+
37+
span {
38+
height: calc(var(--size) + 8rem * sin((sibling-index() / sibling-count()) * pi));
39+
}
40+
</style>
41+
</head>
42+
43+
<body>
44+
<span class="space"></span>
45+
<span>M</span>
46+
<span>A</span>
47+
<span>S</span>
48+
<span>O</span>
49+
<span>N</span>
50+
<span>R</span>
51+
<span>Y</span>
52+
<span class="space"></span>
53+
<span>I</span>
54+
<span>S</span>
55+
<span class="space"></span>
56+
<span>A</span>
57+
<span>W</span>
58+
<span>E</span>
59+
<span>S</span>
60+
<span>O</span>
61+
<span>M</span>
62+
<span>E</span>
63+
<span>!</span>
64+
<span class="space"></span>
65+
<span class="space"></span>
66+
</body>
67+
68+
</html>

0 commit comments

Comments
 (0)