--- title: "Gallery UI: anatomy, variants and examples | Kombai" description: "A gallery lays out many images in a grid people can scan at a glance, and opens any one of them larger." canonical_url: https://kombai.com/glossary/gallery/ author: "The Kombai Team" --- # Gallery A gallery lays out many images in a grid people can scan at a glance, and opens any one of them larger. - Also called: image grid - Platforms: Web, Mobile - In the Kombai gallery: [52 web designs](https://kombai.com/gallery/web/gallery/), [30 mobile designs](https://kombai.com/gallery/mobile/gallery/) - [Marlwick](https://kombai.com/gallery/inspirations/gallery-web-2/) (Web) - [Emquad](https://kombai.com/gallery/inspirations/gallery-ios-21/) (Mobile) - [Quirefold](https://kombai.com/gallery/inspirations/gallery-web-3/) (Web) ## 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. ## When to use gallery - **The image is the content.** Photos, artwork, references and portfolios people judge by eye. - **Many images of one thing.** A listing, a product or a place with a dozen photos or more. - **Picking images.** Choosing photos to attach, covers to use or topics to follow. ## When not to use one - **Items people read.** Articles and messages need their titles. Use a stacked list or cards. - **Comparing details.** Specs and prices side by side belong in a table. - **Only two or three images.** A single large image or a short carousel shows them better. ## Anatomy 1. **Grid**: Rows of tiles that wrap 2. **Thumbnail**: A button that shows the photo 3. **Count**: Position, like "2 of 6" 4. **Viewer**: One image, large 5. **Controls**: Previous, next and full size 6. **States**: Rest, hover, focus, selected ## Variants We sorted every gallery design in the Kombai gallery and found six patterns. ### 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. - [Photos](https://kombai.com/gallery/inspirations/gallery-ios-27/) (Mobile) - [Kilnwright](https://kombai.com/gallery/inspirations/gallery-web-29/) (Web) - [Gadleigh](https://kombai.com/gallery/inspirations/gallery-web-49/) (Web) ### 2. Masonry Columns of images that keep their own heights, so portrait and landscape work sit together without cropping. - [Search risograph](https://kombai.com/gallery/inspirations/gallery-ios-2/) (Mobile) - [Aventurine](https://kombai.com/gallery/inspirations/gallery-ios-4/) (Mobile) - [Tannvale](https://kombai.com/gallery/inspirations/gallery-web-23/) (Web) ### 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. - [Hivestead](https://kombai.com/gallery/inspirations/gallery-web-18/) (Web) - [Quoinstead](https://kombai.com/gallery/inspirations/gallery-web-30/) (Web) - [Solstace](https://kombai.com/gallery/inspirations/gallery-ios-12/) (Mobile) ### 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. - [Corymbe](https://kombai.com/gallery/inspirations/gallery-ios-19/) (Mobile) - [Quirefold](https://kombai.com/gallery/inspirations/gallery-ios-24/) (Mobile) - [Pick Reference](https://kombai.com/gallery/inspirations/gallery-web-32/) (Web) ### 5. Collections Boards or folders shown as a cluster of their first few images, with a name and a count under each. - [Firnvale](https://kombai.com/gallery/inspirations/gallery-ios-26/) (Mobile) - [Your Yard](https://kombai.com/gallery/inspirations/gallery-web-46/) (Web) - [Feltside](https://kombai.com/gallery/inspirations/gallery-web-4/) (Web) ### 6. Topic tiles Photo tiles labeled with an interest or a craft, picked during onboarding to shape what people see. - [Corriecraft](https://kombai.com/gallery/inspirations/gallery-ios-28/) (Mobile) - [Firnwick](https://kombai.com/gallery/inspirations/gallery-ios-29/) (Mobile) - [Coppicehall](https://kombai.com/gallery/inspirations/gallery-web-36/) (Web) ## Where galleries show up ### Places and stays Hotel, landmark and garden pages that lead with photos before the details and the booking button. - [Solvard Hotel Kestrelby](https://kombai.com/gallery/inspirations/gallery-web-20/) (Web) - [Nethercomb Water Meadows](https://kombai.com/gallery/inspirations/gallery-web-27/) (Web) - [Meridiel Botanic Reserve](https://kombai.com/gallery/inspirations/gallery-ios-13/) (Mobile) ### AI image tools Generated images laid out as a grid of results, so people can compare takes and pick one to refine. - [Sporelume](https://kombai.com/gallery/inspirations/gallery-web-11/) (Web) - [Coppicant](https://kombai.com/gallery/inspirations/gallery-web-47/) (Web) - [Cerelume Studio](https://kombai.com/gallery/inspirations/gallery-web-38/) (Web) ### Portfolios A studio, a maker or a workshop showing its work as one grid, with little else on the page. - [Cygnara](https://kombai.com/gallery/inspirations/gallery-ios-14/) (Mobile) - [Archive](https://kombai.com/gallery/inspirations/gallery-web-25/) (Web) - [Randmoor Careers](https://kombai.com/gallery/inspirations/gallery-web-48/) (Web) ## Gallery vs similar components | | [Gallery](https://kombai.com/glossary/gallery/) | [Carousel](https://kombai.com/glossary/carousel/) | [Card](https://kombai.com/glossary/card/) | |---|---|---|---| | Shows | Many images at once | A few items at a time | One item per framed block | | Layout | An even or masonry grid | One scrolling row | Grid, rail or stack | | Best for | Photos, portfolios and references | Short, optional sets | Mixed content with text and actions | ## Build notes - Make each thumbnail a