How to Build a Responsive Image Gallery Section (Copy-Paste Code)

How do you build a responsive image gallery section?

Build a responsive image gallery section with CSS grid for the layout, lazy-loaded images in a modern format, and a lightweight lightbox for the full view. Grid handles responsiveness automatically, lazy loading keeps it fast, and about fifteen lines of JavaScript give you the click-to-enlarge without a heavy library. Here’s the copy-paste build.

Learn how to do a gallery section design professionally. Also, you can explore 10+ Bootstrap Image Gallery Sections | HTML Gallery

The markup and grid

<section>
  <a href="/img/1-full.jpg"><img src="/img/1-thumb.webp" alt="Project one" loading="lazy" width="400" height="300"></a>
  <a href="/img/2-full.jpg"><img src="/img/2-thumb.webp" alt="Project two" loading="lazy" width="400" height="300"></a>
</section>

.gallery{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}

auto-fill with minmax() makes the grid reflow across every screen size with no media queries. Setting width/height reserves space so the layout never shifts as images load.

A lightbox without a library

const gallery = document.querySelector('.gallery');
const box = document.createElement('div');
box.className = 'lightbox'; document.body.append(box);
gallery.addEventListener('click', e => {
  const a = e.target.closest('a'); if(!a) return;
  e.preventDefault();
  box.innerHTML = '<img src="'+a.href+'" alt="">';
  box.classList.add('open');
});
box.addEventListener('click', () => box.classList.remove('open'));

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);
  display:none;place-items:center;padding:24px;z-index:50}
.lightbox.open{display:grid}
.lightbox img{max-width:100%;max-height:100%;border-radius:8px}

That’s the whole thing — a fast, dependency-free gallery with click-to-enlarge that works on mobile and desktop.

Performance: the part that ranks

• Serve thumbnails as WebP/AVIF, sized to their display size — don’t ship a 3000px image into a 400px slot.
• loading="lazy" on every image below the fold.
• Always set width and height to prevent layout shift (CLS).
• Only the lightbox loads the full-resolution image, and only on click.

Accessibility

• Real, descriptive alt text on every image (not “image1”).
• The lightbox is keyboard-dismissible (add an Escape handler for polish).
• Sufficient contrast on any captions or controls.

Want tested gallery blocks to start from? Our free responsive gallery sections give you accessible, optimized patterns you can drop in.

Gallery layout approaches compared

For a portfolio or product gallery, the CSS-grid approach above wins on speed and simplicity. If you want a tested block, our free responsive gallery section ships accessible and optimized.

Frequently asked questions

What’s the best way to make an image gallery responsive?

CSS grid with repeat(auto-fill, minmax(...)). It reflows across screen sizes automatically, with no media queries and no JavaScript for the layout.

Do I need a library for a lightbox?

No. About fifteen lines of vanilla JavaScript give you click-to-enlarge. A library adds weight you usually don’t need for a simple gallery.

How do I keep an image gallery fast?

Serve correctly-sized images in WebP or AVIF, lazy-load below-the-fold images, set width and height to prevent layout shift, and load full-resolution images only in the lightbox on click.