Naive implementation in Svelte without column balancing.
Masonry size: 0px × 0px (w × h)
h0 = 161px
linear-gradient(45deg, #d84548, #d0d008)
h1 = 242px
linear-gradient(45deg, #6f2da3, #ee98f8)
h2 = 185px
linear-gradient(45deg, #d727c8, #884dfc)
h3 = 247px
linear-gradient(45deg, #fabfce, #1f5d18)
h4 = 193px
linear-gradient(45deg, #c3c068, #2815c6)
h5 = 168px
linear-gradient(45deg, #abfa08, #8c4a28)
h6 = 204px
linear-gradient(45deg, #b70f28, #9d9874)
h7 = 180px
linear-gradient(45deg, #5f7fdf, #17297f)
h8 = 252px
linear-gradient(45deg, #5ade39, #825ae8)
h9 = 170px
linear-gradient(45deg, #516f24, #28e905)
h10 = 156px
linear-gradient(45deg, #f5da68, #8304b8)
h11 = 100px
linear-gradient(45deg, #43ef78, #188506)
h12 = 100px
linear-gradient(45deg, #94d0c8, #0d067f)
h13 = 133px
linear-gradient(45deg, #1ae628, #190f99)
h14 = 152px
linear-gradient(45deg, #7c4ef8, #7280d9)
h15 = 136px
linear-gradient(45deg, #d8d348, #1af2c8)
h16 = 298px
linear-gradient(45deg, #dc71b7, #0d46b5)
h17 = 283px
linear-gradient(45deg, #07ccf9, #6a02ef)
h18 = 200px
linear-gradient(45deg, #6c0547, #0df758)
h19 = 177px
linear-gradient(45deg, #6ef728, #44e262)
h20 = 135px
linear-gradient(45deg, #b94722, #fb4588)
h21 = 261px
linear-gradient(45deg, #3cc96b, #328b68)
h22 = 153px
linear-gradient(45deg, #3aac5f, #69c8c7)
h23 = 218px
linear-gradient(45deg, #8e1089, #a8ee98)
h24 = 204px
linear-gradient(45deg, #b1855e, #9c00b6)
h25 = 253px
linear-gradient(45deg, #64d9e8, #935465)
h26 = 118px
linear-gradient(45deg, #752836, #563638)
h27 = 133px
linear-gradient(45deg, #fb6f38, #79c428)
h28 = 248px
linear-gradient(45deg, #b18298, #cd4528)
h29 = 113px
linear-gradient(45deg, #081938, #468f67)
Sliding card flip?