What you'll build

A responsive image gallery with React. Uses grid layout that adapts to screen size, lazy loading for better performance, and a click-to-open lightbox modal. A reusable component perfect for portfolios or product catalogs.

Step 1: Ask an AI for the gallery

I need an image gallery in React with:
- Responsive grid (1, 2 or 3 columns based on screen)
- Lazy loading images
- Click to open lightbox/modal
- Previous/next navigation in modal
- Close with X or click outside
- Smooth animations
- TypeScript and Tailwind CSS

Use Unsplash placeholder images.

Responsive grid

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
  {images.map((image, index) => (
    <div
      key={image.id}
      className="aspect-square overflow-hidden rounded-lg cursor-pointer"
      onClick={() => openLightbox(index)}
    >
      <img
        src={image.src}
        alt={image.alt}
        loading="lazy"
        className="w-full h-full object-cover hover:scale-105 transition"
      />
    </div>
  ))}
</div>

Lightbox

const [lightboxIndex, setLightboxIndex] = useState<number | null>(null)

const openLightbox = (index: number) => setLightboxIndex(index)
const closeLightbox = () => setLightboxIndex(null)

const next = () => {
  if (lightboxIndex !== null) {
    setLightboxIndex((lightboxIndex + 1) % images.length)
  }
}

const prev = () => {
  if (lightboxIndex !== null) {
    setLightboxIndex((lightboxIndex - 1 + images.length) % images.length)
  }
}

Test images

const images = [
  { id: 1, src: 'https://picsum.photos/800/600?random=1', alt: 'Image 1' },
  { id: 2, src: 'https://picsum.photos/800/600?random=2', alt: 'Image 2' },
  // more...
]

Next step

→ API with FastAPI

Image Gallery