Svelte Bricks
 Svelte Bricks

NPM version Docs

Svelte masonry component with SSR support (via CSS container queries) and automatic column balancing.

Masonry size: 0px × 0px (w × h)

h0 = 127px

linear-gradient(45deg, #4b776b, #76b109)

h5 = 141px

linear-gradient(45deg, #4ec127, #ea53c8)

h10 = 159px

linear-gradient(45deg, #f69bd8, #f78bf3)

h15 = 127px

linear-gradient(45deg, #f60e98, #dd7241)

h20 = 190px

linear-gradient(45deg, #339798, #e7e8b4)

h25 = 285px

linear-gradient(45deg, #330978, #b372db)

h1 = 295px

linear-gradient(45deg, #959b51, #099108)

h6 = 244px

linear-gradient(45deg, #f26f13, #5a869e)

h11 = 163px

linear-gradient(45deg, #0a9758, #c1e318)

h16 = 104px

linear-gradient(45deg, #47a6b8, #87719e)

h21 = 211px

linear-gradient(45deg, #d6d538, #5a3568)

h26 = 142px

linear-gradient(45deg, #affbb6, #573d23)

h2 = 108px

linear-gradient(45deg, #fc5705, #42cff1)

h7 = 232px

linear-gradient(45deg, #a9e768, #3bdc68)

h12 = 151px

linear-gradient(45deg, #ca6453, #3204f5)

h17 = 261px

linear-gradient(45deg, #bbd002, #c81b18)

h22 = 110px

linear-gradient(45deg, #ca3a78, #661c48)

h27 = 152px

linear-gradient(45deg, #7d93cd, #ce79d8)

h3 = 131px

linear-gradient(45deg, #f53568, #893f48)

h8 = 270px

linear-gradient(45deg, #a980b4, #21c638)

h13 = 204px

linear-gradient(45deg, #0eb5f7, #d10398)

h18 = 144px

linear-gradient(45deg, #89afe8, #f6dfcd)

h23 = 139px

linear-gradient(45deg, #23efce, #1c1bdb)

h28 = 232px

linear-gradient(45deg, #252693, #30f728)

h4 = 283px

linear-gradient(45deg, #1844d8, #c8f9d8)

h9 = 197px

linear-gradient(45deg, #58c9bf, #ed9b93)

h14 = 295px

linear-gradient(45deg, #d166e8, #e6409d)

h19 = 102px

linear-gradient(45deg, #2c5407, #595b38)

h24 = 236px

linear-gradient(45deg, #83829b, #ea37a2)

h29 = 220px

linear-gradient(45deg, #fe1496, #3dfbf2)

Sliding card flip?