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

linear-gradient(45deg, #ecfb88, #208708)

h5 = 248px

linear-gradient(45deg, #a30b26, #6c85b8)

h10 = 120px

linear-gradient(45deg, #3225a5, #29d7b4)

h15 = 260px

linear-gradient(45deg, #196198, #03e042)

h20 = 190px

linear-gradient(45deg, #8c6ef8, #9a07f8)

h25 = 150px

linear-gradient(45deg, #118da2, #bcc908)

h1 = 184px

linear-gradient(45deg, #627f68, #742d3f)

h6 = 139px

linear-gradient(45deg, #c25e48, #0a1c3a)

h11 = 264px

linear-gradient(45deg, #d52218, #02d3c1)

h16 = 120px

linear-gradient(45deg, #f806db, #ed8e54)

h21 = 193px

linear-gradient(45deg, #763249, #9cc3e8)

h26 = 168px

linear-gradient(45deg, #79b868, #17db08)

h2 = 229px

linear-gradient(45deg, #56b4c2, #ac4718)

h7 = 144px

linear-gradient(45deg, #a7e1e8, #c0f1e8)

h12 = 280px

linear-gradient(45deg, #ce2d88, #5feb28)

h17 = 160px

linear-gradient(45deg, #39803c, #663444)

h22 = 129px

linear-gradient(45deg, #3bfca3, #4ab374)

h27 = 221px

linear-gradient(45deg, #3c6918, #269d38)

h3 = 211px

linear-gradient(45deg, #9a22af, #8c7dc3)

h8 = 162px

linear-gradient(45deg, #3f7b4a, #c50818)

h13 = 217px

linear-gradient(45deg, #3489f8, #ab59ba)

h18 = 242px

linear-gradient(45deg, #cff438, #c56608)

h23 = 233px

linear-gradient(45deg, #78b655, #9893f8)

h28 = 272px

linear-gradient(45deg, #f35b34, #587ba8)

h4 = 215px

linear-gradient(45deg, #86a448, #68f213)

h9 = 102px

linear-gradient(45deg, #738165, #9b2368)

h14 = 213px

linear-gradient(45deg, #757f68, #4a4ed8)

h19 = 148px

linear-gradient(45deg, #f54c75, #bf0417)

h24 = 297px

linear-gradient(45deg, #ca1548, #d25438)

h29 = 144px

linear-gradient(45deg, #6d4678, #824f88)

Sliding card flip?