Masonry

@layer components {
  .masonry {
    @apply columns-1 sm:columns-2 md:columns-3 lg:columns-4 [&>li]:mb-4 [&>li]:break-inside-avoid;
  }
}

<ul className="masonry">
  {Array.from({ length: 12 }).map((_, key) => (
    <li key={key}>
      <img
        src={`https://picsum.photos/200/${Math.ceil(Math.random() * 5) * 100}`}
        alt=""
      />
    </li>
  ))}
</ul>