Layouts · Content display
Gallery
Also called: Photo gallery, Image grid, Photo wall, Lightbox gallery
A layout where images are the star. Thumbnails of the same aspect ratio are packed into a grid with almost no text, and clicking one opens it large with left and right navigation.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstShow the album as a gallery. Crop thumbnails to 1:1 squares, 6 per row on desktop and 3 per row on phones, with 4px gaps and no text. On hover, add a semi-transparent overlay with the file name. Clicking a thumbnail opens a full-screen image viewer that supports going left and right, arrow keys, and Esc to close, with "3 / 24" shown at the bottom. Use small image sizes for the thumbnails and lazy-load them.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Gallery is what you need.
Use Gallery when
- The content is mostly images or videos and the text can be left out
- Users need to see as many images as possible at once to browse and pick quickly
- Users need to see a single image large and switch between images in the same set
Pick something else when
Each item needs text like a title, description or price
Use insteadCard GridImage ratios vary a lot and cropping would cut off important parts
Use insteadMasonry LayoutThe content is mostly text and the images are just illustrations
Use insteadImage
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Thumbnails load the full-size originals, so dozens of large images per page slow everything down
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
Clicking an image just opens the original in a new tab, with no way to go back and forth
- 03
Every image gets a long title and description, turning the gallery into a card grid stuffed with text
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
Thumbnails of the same ratio in a neat grid with very small gaps. Clicking any one opens a full-screen image viewer where you can go back and forth.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A gallery shows a set of images or videos, like photo albums, portfolios, asset libraries and product photos. Thumbnails are packed tightly into a grid with small gaps and are usually cropped to the same ratio (square or 4:3). The most text you'll see is a file name that appears on hover. Clicking any thumbnail opens a large image viewer (often called a lightbox), where you can go left and right, zoom in and view the original.
The difference from a Card Grid: each card in a card grid has a title, description and buttons, and images and text matter equally; in a gallery the images are the whole content, and there can be no text at all. The difference from a Masonry Layout: masonry keeps the images' original ratios, staggers them and usually adds titles and authors; a gallery usually crops images to the same ratio in neat rows and columns and focuses on showing as many images as possible at once.
The "one large image with a row of small thumbnails" pattern on product detail pages is also a variation of a gallery.
Developer infoTerm ID, DOM cues, match priority
- Term ID
layout-gallery- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026