Pick a grid, masonry or justified layout, tune the gap and hover effect, add a click-to-zoom lightbox, then copy ready-to-use HTML, CSS and JS.
Three layout modes, tunable spacing, and a real working lightbox — all CSS and vanilla JS.
Even grid, masonry columns, or a flexible justified row layout.
Subtle zoom or a darkening overlay with caption, or none at all.
Click any tile to open a real fullscreen preview, closable with Escape.
Photo galleries generally fall into three visual families. An even grid keeps every tile the same size using CSS Grid, which is predictable and works well for square thumbnails like product shots. A masonry layout uses variable-height images packed into columns, giving a more natural, Pinterest-like feel that suits real photography with mixed aspect ratios. A justified layout, popular on photo-sharing sites, keeps rows a consistent height while letting tile widths flex to fill the row. This generator builds all three with plain CSS, no JavaScript layout library required, and adds an optional fullscreen lightbox written in a few lines of vanilla JavaScript so clicking any tile shows an enlarged view without leaving the page.
Grid is simplest and most uniform; masonry embraces varied image heights; justified balances both with consistent row heights.
All three layout modes are pure CSS (grid, columns, flexbox) — JavaScript is only used for the optional lightbox interaction.
A subtle zoom or darken effect signals interactivity before the user even clicks a tile.
The lightbox closes on click-outside or Escape, keeping keyboard and mouse users both able to dismiss it easily.
Even grid (equal square tiles), masonry-columns (CSS multi-column layout with variable heights) and justified-flex (a flexible row-based layout similar to photo-sharing sites).
When enabled, clicking any tile opens a fullscreen overlay with an enlarged version of that image. It closes on click or by pressing Escape, using plain vanilla JavaScript with no external library.
Yes. The preview uses colored placeholder divs so you can see the layout clearly. The exported code includes a comment showing exactly where to swap in your own img tags.
Yes. All three layout modes use CSS grid, columns or flexbox with wrapping, so the gallery reflows naturally at any screen width.
Keep building photo and grid layouts with these free tools.