Naive implementation in Svelte without column balancing.
Masonry size: 0px × 0px (w × h)
h0 = 127px
linear-gradient(45deg, #a6baac, #35e5c5)
h1 = 250px
linear-gradient(45deg, #4d52f7, #6b2ece)
h2 = 275px
linear-gradient(45deg, #de9267, #8e71fa)
h3 = 109px
linear-gradient(45deg, #f526ec, #941c07)
h4 = 284px
linear-gradient(45deg, #a709f5, #f4fd81)
h5 = 207px
linear-gradient(45deg, #576562, #5a0d1e)
h6 = 136px
linear-gradient(45deg, #8b9b98, #9dbff7)
h7 = 266px
linear-gradient(45deg, #11d917, #9502f7)
h8 = 193px
linear-gradient(45deg, #53dc0b, #0f996e)
h9 = 268px
linear-gradient(45deg, #f90095, #d0c29c)
h10 = 295px
linear-gradient(45deg, #b4f59f, #f54b8b)
h11 = 220px
linear-gradient(45deg, #51aa03, #4321de)
h12 = 111px
linear-gradient(45deg, #8fc2df, #713ec8)
h13 = 254px
linear-gradient(45deg, #63dd26, #b387ab)
h14 = 260px
linear-gradient(45deg, #e77889, #ed7898)
h15 = 135px
linear-gradient(45deg, #7de67c, #6d3bd4)
h16 = 116px
linear-gradient(45deg, #bec968, #2eff21)
h17 = 270px
linear-gradient(45deg, #c413b3, #e3f57b)
h18 = 118px
linear-gradient(45deg, #1eeda9, #2d7ca1)
h19 = 225px
linear-gradient(45deg, #6cea75, #f4aa5e)
h20 = 202px
linear-gradient(45deg, #1d7402, #281d9e)
h21 = 127px
linear-gradient(45deg, #fe1205, #961958)
h22 = 112px
linear-gradient(45deg, #31e4e7, #3b3393)
h23 = 255px
linear-gradient(45deg, #1a7516, #28996f)
h24 = 184px
linear-gradient(45deg, #5ccdb3, #48dfc3)
h25 = 240px
linear-gradient(45deg, #c22506, #a59904)
h26 = 183px
linear-gradient(45deg, #e633de, #6ebd7e)
h27 = 227px
linear-gradient(45deg, #243f19, #240847)
h28 = 249px
linear-gradient(45deg, #eefa1a, #c77317)
h29 = 165px
linear-gradient(45deg, #7eca6c, #b32659)
Sliding card flip?