Naive implementation in Svelte without column balancing.
Masonry size: 0px × 0px (w × h)
h0 = 232px
linear-gradient(45deg, #8672f7, #dc8c8f)
h1 = 134px
linear-gradient(45deg, #5ae9ff, #f5581e)
h2 = 174px
linear-gradient(45deg, #98effe, #33cc61)
h3 = 200px
linear-gradient(45deg, #0fcf17, #69e4a5)
h4 = 244px
linear-gradient(45deg, #f1e929, #518161)
h5 = 235px
linear-gradient(45deg, #3d8149, #288549)
h6 = 125px
linear-gradient(45deg, #0dd04d, #792951)
h7 = 240px
linear-gradient(45deg, #7015da, #7a182c)
h8 = 113px
linear-gradient(45deg, #b72445, #c8b0e8)
h9 = 104px
linear-gradient(45deg, #9cf0dc, #e134cc)
h10 = 256px
linear-gradient(45deg, #a52f21, #b5e93f)
h11 = 264px
linear-gradient(45deg, #680814, #d4b3e3)
h12 = 293px
linear-gradient(45deg, #711fbc, #3ccbeb)
h13 = 158px
linear-gradient(45deg, #735752, #24b4b4)
h14 = 195px
linear-gradient(45deg, #ff2a2f, #46580b)
h15 = 117px
linear-gradient(45deg, #3d217b, #5439be)
h16 = 248px
linear-gradient(45deg, #1c9ab1, #1c20e7)
h17 = 237px
linear-gradient(45deg, #eb48b3, #af46f1)
h18 = 213px
linear-gradient(45deg, #71ec1d, #268d85)
h19 = 279px
linear-gradient(45deg, #dbd5d8, #ef58f5)
h20 = 228px
linear-gradient(45deg, #f12084, #ce96a6)
h21 = 255px
linear-gradient(45deg, #669589, #e7944d)
h22 = 282px
linear-gradient(45deg, #8f7456, #9be148)
h23 = 211px
linear-gradient(45deg, #bde5d2, #dcfebb)
h24 = 112px
linear-gradient(45deg, #22d21b, #7952dc)
h25 = 102px
linear-gradient(45deg, #34a342, #5d72b9)
h26 = 293px
linear-gradient(45deg, #d815b4, #f02ac4)
h27 = 240px
linear-gradient(45deg, #025898, #24aa17)
h28 = 278px
linear-gradient(45deg, #bb9b06, #74ac78)
h29 = 147px
linear-gradient(45deg, #b0ba63, #f6a379)
Sliding card flip?