x
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
<ul role="list" style="--masonry-columns: 3; --masonry-gap: 1rem;" class="midwest-masonry"> <li class="midwest-masonry-item"> <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold" style="height: 140px"> Tile 1 </div> </li> <li class="midwest-masonry-item"> <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold" style="height: 220px"> Tile 2 </div> </li> <li class="midwest-masonry-item"> <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold" style="height: 180px"> Tile 3 </div> </li> <li class="midwest-masonry-item"> <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold" style="height: 300px"> Tile 4 </div> </li> <li class="midwest-masonry-item"> <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold" style="height: 160px"> Tile 5 </div> </li> <li class="midwest-masonry-item"> <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold" style="height: 240px"> Tile 6 </div> </li> <li class="midwest-masonry-item"> <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold" style="height: 200px"> Tile 7 </div> </li> <li class="midwest-masonry-item"> <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold" style="height: 120px"> Tile 8 </div> </li> <li class="midwest-masonry-item"> <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold" style="height: 260px"> Tile 9 </div> </li> <li class="midwest-masonry-item"> <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold" style="height: 190px"> Tile 10 </div> </li> <li class="midwest-masonry-item"> <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold" style="height: 150px"> Tile 11 </div> </li> <li class="midwest-masonry-item"> <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold" style="height: 280px"> Tile 12 </div> </li></ul>1
2
3
4
5
6
7
8
9
10
11
<% heights = [140, 220, 180, 300, 160, 240, 200, 120, 260, 190, 150, 280] %><%= midwest_masonry(columns: 3) do |m| %> <% heights.each_with_index do |h, i| %> <% m.with_item do %> <div class="rounded-lg bg-theme-2 dark:bg-theme-10 text-theme-11 dark:text-theme-2 flex items-center justify-center font-semibold" style="height: <%= h %>px"> Tile <%= i + 1 %> </div> <% end %> <% end %><% end %>Default
A three-column masonry of varied-height tiles. Resize the window to see the column count step down to two, then one.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Masonry/default
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."