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 = 171px

linear-gradient(45deg, #7b1419, #a56976)

h5 = 175px

linear-gradient(45deg, #41eee8, #0c3128)

h10 = 142px

linear-gradient(45deg, #66bc3e, #5a5208)

h15 = 213px

linear-gradient(45deg, #455738, #73fcb2)

h20 = 238px

linear-gradient(45deg, #54b1e8, #26d968)

h25 = 287px

linear-gradient(45deg, #b39fe1, #4a354e)

h1 = 210px

linear-gradient(45deg, #77c788, #811e48)

h6 = 234px

linear-gradient(45deg, #b1cdd2, #16aac8)

h11 = 235px

linear-gradient(45deg, #cb03f8, #cfb078)

h16 = 221px

linear-gradient(45deg, #32aa7c, #e19728)

h21 = 235px

linear-gradient(45deg, #c83db8, #f67248)

h26 = 206px

linear-gradient(45deg, #6320e2, #11edf8)

h2 = 156px

linear-gradient(45deg, #b0abf8, #021468)

h7 = 227px

linear-gradient(45deg, #63a378, #1a56e8)

h12 = 153px

linear-gradient(45deg, #4a853a, #b09278)

h17 = 108px

linear-gradient(45deg, #c0190d, #58b268)

h22 = 125px

linear-gradient(45deg, #daf138, #ce4438)

h27 = 200px

linear-gradient(45deg, #3b757c, #e154d8)

h3 = 223px

linear-gradient(45deg, #95c948, #15bed5)

h8 = 190px

linear-gradient(45deg, #5f56c8, #22b977)

h13 = 103px

linear-gradient(45deg, #dbb398, #34ec38)

h18 = 228px

linear-gradient(45deg, #17eb18, #d8f658)

h23 = 247px

linear-gradient(45deg, #252bb8, #0b3e68)

h28 = 265px

linear-gradient(45deg, #86ba58, #21af0e)

h4 = 223px

linear-gradient(45deg, #9e03f6, #0bd018)

h9 = 100px

linear-gradient(45deg, #f40f48, #77ea3e)

h14 = 285px

linear-gradient(45deg, #229728, #32d948)

h19 = 290px

linear-gradient(45deg, #275dc8, #fc81cd)

h24 = 150px

linear-gradient(45deg, #e98508, #c9b638)

h29 = 294px

linear-gradient(45deg, #72d878, #f822c8)

Sliding card flip?