Justified Gallery

<!--
  A Flickr-style justified wall with no measuring JS: a fixed row height plus
  flex-grow on every tile stretches each row edge-to-edge, and the per-tile
  basisClass gives them different natural widths so the ragged-right seam falls
  in a different place each row. flex-wrap keeps it within the container width.
-->
<ul class="flex w-full list-none flex-wrap gap-2 p-0">
  <li class="h-28 grow basis-52 sm:h-36">
    <div class="h-full w-full rounded-lg bg-gradient-to-br from-sky-400 to-indigo-600" role="img" aria-label="Sky-blue to indigo gradient"></div>
  </li>
  <li class="h-28 grow basis-40 sm:h-36">
    <div class="h-full w-full rounded-lg bg-gradient-to-br from-rose-400 to-orange-500" role="img" aria-label="Rose to orange gradient"></div>
  </li>
  <li class="h-28 grow basis-64 sm:h-36">
    <div class="h-full w-full rounded-lg bg-gradient-to-br from-emerald-400 to-teal-600" role="img" aria-label="Emerald to teal gradient"></div>
  </li>
  <li class="h-28 grow basis-44 sm:h-36">
    <div class="h-full w-full rounded-lg bg-gradient-to-br from-violet-400 to-fuchsia-600" role="img" aria-label="Violet to fuchsia gradient"></div>
  </li>
  <li class="h-28 grow basis-56 sm:h-36">
    <div class="h-full w-full rounded-lg bg-gradient-to-br from-amber-400 to-red-500" role="img" aria-label="Amber to red gradient"></div>
  </li>
</ul>