Galleries from the Kombai gallery: a real-estate listing's photos, a print marketplace's search results and a maker's reference wall.
What is a gallery?
A gallery is a grid of images, or of cards led by images, that people browse by looking rather than reading. The tiles are small so many fit on screen, and selecting one opens it larger, often in a viewer that steps through the rest.
- Images do the work: captions are short or left off entirely.
- Tiles share one size in an even grid, or keep their own shape in a masonry layout.
Galleries show up across product detail, social feed, review and portfolio screens.
When to use a gallery
- The image is the contentPhotos, artwork, references and portfolios people judge by eye.
- Many images of one thingA listing, a product or a place with a dozen photos or more.
- Picking imagesChoosing photos to attach, covers to use or topics to follow.
When not to use one
- Items people readArticles and messages need their titles. Use a stacked list or cards.
- Comparing detailsSpecs and prices side by side belong in a table.
- Only two or three imagesA single large image or a short carousel shows them better.
Anatomy of a gallery
This one works. Pick a thumbnail, step through with the arrows, or open Full size and use the Left and Right keys. Escape closes it.
Harbor cottage
Pier at dusk, 1 of 6- Rest
- Hover
- Keyboard focus
- Selected
- GridRows of tiles that wrap
- ThumbnailA button that shows the photo
- CountPosition, like "2 of 6"
- ViewerOne image, large
- ControlsPrevious, next and full size
- StatesRest, hover, focus, selected
Gallery variants
We sorted every gallery design in the Kombai gallery and found six patterns. Browse all 52 web and 30 mobile designs.
1. Even grids
Square or same-ratio tiles in tidy rows, two or three across on a phone. Common on photo tabs and in photo libraries.
2. Masonry
Columns of images that keep their own heights, so portrait and landscape work sit together without cropping.
3. Photo mosaics
One large photo beside a block of smaller ones, with a button to see all of them. Common at the top of listings.
4. Photo pickers
A grid where tapping a tile selects it, with a check on each pick and a count of how many are chosen.
5. Collections
Boards or folders shown as a cluster of their first few images, with a name and a count under each.
6. Topic tiles
Photo tiles labeled with an interest or a craft, picked during onboarding to shape what people see.
Where galleries show up
Places and stays
Hotel, landmark and garden pages that lead with photos before the details and the booking button.
AI image tools
Generated images laid out as a grid of results, so people can compare takes and pick one to refine.
Portfolios
A studio, a maker or a workshop showing its work as one grid, with little else on the page.
Gallery vs similar components
Build notes
- Make each thumbnail a <button> or a link to the full image, and give it alt text that describes the photo.
- Use alt="" only for images that are pure decoration.
- Open the large view in a <dialog> with showModal(), so focus moves into it and Escape closes it.
- When the viewer closes, return focus to the thumbnail that opened it.
- Set width and height on every image, so the grid holds its shape while images load.
- Add loading="lazy" to images below the fold, and serve small files in the grid.
FAQ
Grid or masonry?
An even grid suits images of the same kind, like product shots, and lines up cleanly. Masonry keeps each image in its own shape, so it suits mixed portrait and landscape work like moodboards. Its order is harder to follow, so skip it when the order matters.
Should gallery images open in a lightbox?
Yes, when people need detail. Open the image large over the page, let people step through with arrows, keys or a swipe, and close back to the same spot in the grid with focus on the photo they opened.
How do you keep a large image gallery fast?
Serve small thumbnails in the grid and the full image only in the viewer. Lazy-load images below the fold with loading="lazy", and give every image a width and height so the page does not shift as they arrive.
Do gallery images need alt text?
Yes, when the image carries meaning, which in a gallery it nearly always does. Describe what the photo shows in a short phrase. An empty alt="" marks an image as decoration that non-visual browsers may skip, so keep it for that.
Related terms
All glossary terms · Browse 52 web and 30 mobile gallery designs