Naive implementation in Svelte without column balancing.
Masonry size: 0px × 0px (w × h)
h0 = 148px
linear-gradient(45deg, #2e90c8, #b9a28d)
h1 = 286px
linear-gradient(45deg, #d2a9e1, #b0bc48)
h2 = 119px
linear-gradient(45deg, #cecd4e, #ab2d08)
h3 = 209px
linear-gradient(45deg, #f98ee9, #d54bc8)
h4 = 158px
linear-gradient(45deg, #4bcb02, #5b9858)
h5 = 163px
linear-gradient(45deg, #6c7706, #9f5db8)
h6 = 220px
linear-gradient(45deg, #8398d8, #f2d321)
h7 = 298px
linear-gradient(45deg, #3e1f5f, #a4ba8f)
h8 = 158px
linear-gradient(45deg, #ec8ef8, #ef0b5a)
h9 = 153px
linear-gradient(45deg, #19c299, #caba15)
h10 = 202px
linear-gradient(45deg, #a4fb1f, #6b6c9b)
h11 = 155px
linear-gradient(45deg, #a8b704, #e4feb8)
h12 = 115px
linear-gradient(45deg, #26ed82, #daeaa8)
h13 = 187px
linear-gradient(45deg, #622b58, #fdfbc4)
h14 = 116px
linear-gradient(45deg, #f0cdc5, #d57028)
h15 = 178px
linear-gradient(45deg, #962fff, #b6b53a)
h16 = 220px
linear-gradient(45deg, #44db44, #dc6892)
h17 = 169px
linear-gradient(45deg, #da0dcd, #a3a248)
h18 = 294px
linear-gradient(45deg, #f39a68, #37e567)
h19 = 179px
linear-gradient(45deg, #daf54b, #0de5d8)
h20 = 237px
linear-gradient(45deg, #92ad78, #db83c8)
h21 = 110px
linear-gradient(45deg, #db4403, #4f1cb8)
h22 = 209px
linear-gradient(45deg, #a4d715, #a765fe)
h23 = 140px
linear-gradient(45deg, #353418, #1fcb54)
h24 = 165px
linear-gradient(45deg, #c4d162, #a81248)
h25 = 273px
linear-gradient(45deg, #dc1c18, #b188bf)
h26 = 221px
linear-gradient(45deg, #e39c9e, #bed548)
h27 = 120px
linear-gradient(45deg, #9a3478, #4cff88)
h28 = 240px
linear-gradient(45deg, #f68625, #0c1598)
h29 = 217px
linear-gradient(45deg, #adafb8, #8ebdd2)
Sliding card flip?