jalil.arfaoui.net/src/components/photo/MasonryGallery.astro

---
import { Picture } from 'astro:assets';

interface Props {
  images: {
    src: ImageMetadata;
    alt: string;
  }[];
  columns?: number;
}

const { images, columns = 5 } = Astro.props;
---

<div class="masonry-gallery" style={`--columns: ${columns}`}>
  {images.map((image, index) => (
    <div class="gallery-item">
      <Picture
        src={image.src}
        alt={image.alt}
        widths={[300, 500, 800]}
        formats={['webp']}
        data-index={index}
        loading={index < 12 ? 'eager' : 'lazy'}
      />
    </div>
  ))}
</div>

<style>
.masonry-gallery {
  columns: var(--columns, 5);
  column-gap: 20px;
  padding: 40px 20px 100px;
  max-width: 100%;
  background: #000;
}

.gallery-item {
  position: relative;
  break-inside: avoid;
  margin-bottom: 20px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: all 0.3s ease;
}

.gallery-item:hover img {
  opacity: 0.8;
}

@media (max-width: 959px) {
  .masonry-gallery {
    columns: 3;
  }
}

@media (max-width: 767px) {
  .masonry-gallery {
    columns: 2;
    padding: 40px 10px 100px;
  }
}

@media (max-width: 480px) {
  .masonry-gallery {
    columns: 1;
    padding: 40px 15px 100px;
  }
}
</style>