OneTaskBy Tim King · Updated
Image Gallery Builder
Grid, Featured or Scrolling Layouts With Columns, Gap, Crop and Captions
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Image Gallery Builder works
An image gallery builder writes the HTML and CSS for a responsive photo grid without a JavaScript plugin. Pick a layout, the number of columns, the crop ratio and how captions and hover effects behave, watch the preview update, then copy the code into your page.
Most photo galleries only need CSS grid. grid-template-columns: repeat(3, 1fr) makes equal
columns, gap spaces them, and aspect-ratio with object-fit: cover crops every photo to the
same shape so rows line up even when the originals are different sizes.
Layouts the image gallery builder offers
The even grid is the classic contact sheet. Featured first image makes the first photo span two columns and two rows, which suits a portfolio cover or a product's main shot. The scrolling strip puts every image in one row that swipes sideways, with scroll snapping so each photo stops cleanly at the edge; it works well for related products or a short set on a phone.
Captions and hover effects
Each image sits in a <figure> with a <figcaption>, which screen readers announce together.
Captions can appear on hover, stay overlaid on a dark gradient so the text is readable on any
photo, or sit below the image. The zoom effect scales the photo inside its frame, and lift raises
the whole card with a shadow. Both switch off for visitors who ask their system for reduced motion.
Performance
Every image has width, height and loading="lazy", so the page does not jump as photos load
and off-screen images wait until the visitor scrolls near them.
FAQ
How is this different from a masonry gallery?
A grid crops every photo to the same ratio so rows stay level. Masonry keeps each photo's own height and packs them into columns like Pinterest, which shows the whole picture but leaves ragged row edges. Use the masonry grid builder when cropping would cut off important parts.
Can I open the photos full size when clicked?
Yes. Wrap each image in a link to the large file, or add a lightbox. The lightbox builder makes a small script that opens any gallery image in a full-screen dialog with next and previous buttons and keyboard support.
How many columns should a gallery have on phones?
Two columns is usually the most a phone can show while keeping photos recognisable, so the code drops to two below 600 pixels. For detailed images such as products, one column on phones may be clearer; change the number in the media query.
Why use figure and figcaption instead of divs?
They tie the caption to the image for assistive technology and search engines. The alt text still describes what the photo shows, while the caption adds context such as a title or credit that sighted visitors also see.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Masonry Grid Builder
Pinterest-style masonry layouts in pure CSS.
Lightbox Builder
Build a dependency-free image lightbox with keyboard and swipe support.
Image Hover Zoom
Create a CSS image zoom on hover, including follow-the-pointer product zoom.
Responsive Image Generator
Generate srcset, sizes and picture markup for responsive images.
Image Compare
Spot differences between two images and get a similarity score.