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

linear-gradient(45deg, #4bd298, #7f9538)

h5 = 257px

linear-gradient(45deg, #391d61, #4e4b78)

h10 = 164px

linear-gradient(45deg, #b4bc9d, #801308)

h15 = 265px

linear-gradient(45deg, #5fb188, #16cc55)

h20 = 293px

linear-gradient(45deg, #9ac4b8, #1bc988)

h25 = 286px

linear-gradient(45deg, #902286, #bf9ac8)

h1 = 254px

linear-gradient(45deg, #ff6e78, #409526)

h6 = 271px

linear-gradient(45deg, #b7a3a7, #a0f61a)

h11 = 210px

linear-gradient(45deg, #c4dce8, #8b5568)

h16 = 173px

linear-gradient(45deg, #1943b8, #64c921)

h21 = 108px

linear-gradient(45deg, #6cc38b, #269fb1)

h26 = 125px

linear-gradient(45deg, #86a07c, #b8ff18)

h2 = 183px

linear-gradient(45deg, #e6592d, #0ae73b)

h7 = 174px

linear-gradient(45deg, #58131d, #6bcea8)

h12 = 156px

linear-gradient(45deg, #482f48, #163282)

h17 = 146px

linear-gradient(45deg, #9011b8, #1460a4)

h22 = 256px

linear-gradient(45deg, #23d87b, #5d6c38)

h27 = 269px

linear-gradient(45deg, #9745a8, #5979c8)

h3 = 185px

linear-gradient(45deg, #389678, #674aa1)

h8 = 273px

linear-gradient(45deg, #486b6e, #aebdc8)

h13 = 277px

linear-gradient(45deg, #f57398, #969198)

h18 = 286px

linear-gradient(45deg, #882ff1, #c16738)

h23 = 131px

linear-gradient(45deg, #bd916d, #544458)

h28 = 128px

linear-gradient(45deg, #e39358, #b32ad2)

h4 = 133px

linear-gradient(45deg, #784bf8, #3be098)

h9 = 133px

linear-gradient(45deg, #0f9e08, #01a308)

h14 = 255px

linear-gradient(45deg, #59105e, #7febc9)

h19 = 169px

linear-gradient(45deg, #f4aba8, #9f1598)

h24 = 186px

linear-gradient(45deg, #d5c428, #5b3fd5)

h29 = 272px

linear-gradient(45deg, #9f7e28, #bc3fc8)

Sliding card flip?