Naive implementation in Svelte without column balancing.
Masonry size: 0px × 0px (w × h)
h0 = 151px
linear-gradient(45deg, #d74cb8, #56709c)
h1 = 115px
linear-gradient(45deg, #b220a8, #7cb9f8)
h2 = 108px
linear-gradient(45deg, #c06aed, #9e9541)
h3 = 284px
linear-gradient(45deg, #d07048, #1ea0b8)
h4 = 148px
linear-gradient(45deg, #059fe5, #472e1c)
h5 = 194px
linear-gradient(45deg, #9ef408, #968928)
h6 = 143px
linear-gradient(45deg, #5648b5, #6dac38)
h7 = 230px
linear-gradient(45deg, #6b276a, #8f4168)
h8 = 225px
linear-gradient(45deg, #fd612f, #59f722)
h9 = 198px
linear-gradient(45deg, #85457e, #3adb28)
h10 = 161px
linear-gradient(45deg, #46e90c, #0ee731)
h11 = 230px
linear-gradient(45deg, #d2bf6d, #6237d8)
h12 = 154px
linear-gradient(45deg, #ab9b03, #65d348)
h13 = 266px
linear-gradient(45deg, #2d3cc1, #ab67cc)
h14 = 102px
linear-gradient(45deg, #4a5498, #a85d6c)
h15 = 255px
linear-gradient(45deg, #3a1908, #9fe7a1)
h16 = 247px
linear-gradient(45deg, #05236a, #444a28)
h17 = 135px
linear-gradient(45deg, #ca2101, #87045e)
h18 = 128px
linear-gradient(45deg, #e93b5d, #c302f3)
h19 = 117px
linear-gradient(45deg, #2cf076, #a4d438)
h20 = 166px
linear-gradient(45deg, #546694, #5bfb38)
h21 = 140px
linear-gradient(45deg, #b6061a, #719111)
h22 = 205px
linear-gradient(45deg, #d9fbb8, #7143a8)
h23 = 293px
linear-gradient(45deg, #967b58, #6f71ae)
h24 = 133px
linear-gradient(45deg, #9fa078, #60e1f2)
h25 = 268px
linear-gradient(45deg, #995e3e, #b6afe1)
h26 = 213px
linear-gradient(45deg, #7f2e32, #812a68)
h27 = 251px
linear-gradient(45deg, #6e70f8, #f04091)
h28 = 210px
linear-gradient(45deg, #646012, #f5c745)
h29 = 218px
linear-gradient(45deg, #f2176e, #6c9788)
Sliding card flip?