CSS Image Gallery
Dropdowns nested menus under links. An image gallery is a different component: a calm grid of thumbnails people can scan. Size the thumbs together, let the row wrap, crop with object-fit, and leave deeper responsive grids to the Flexbox and Grid modules next.
A gallery toolkit
📊 Image gallery at a glance
| Piece | Everyday job |
|---|---|
| Gallery list | Wrapper that lays thumbs in a wrapping row or grid |
| Thumb size | Shared width/height so the set looks even |
object-fit: cover |
Fills the thumb box without awkward stretch |
| Gap / margin | Breathing room between images |
| Hover cue | Soft feedback without jumping the layout |
| Caption | Optional figure/figcaption for meaning |
Use real <img> elements with useful alt text. Decorative-only sprites belong elsewhere — galleries are usually content.
Wrapping flex gallery
A flex container with wrap turns a list of thumbs into a responsive row that drops to the next line. Gap keeps spacing honest.
.gallery {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
list-style: none;
margin: 0;
padding: 0;
}
Shared thumb box + cover
Give each image the same box, then crop with cover so portraits and landscapes share one rhythm.
.gallery img {
width: 160px;
height: 120px;
object-fit: cover;
display: block;
border-radius: 0.35rem;
}
Figures and captions
When a label matters, wrap the image in figure and add figcaption. Keep caption text short under the thumb.
.gallery figure {
margin: 0;
width: 160px;
}
.gallery figcaption {
margin-top: 0.35rem;
font-size: 0.85rem;
color: #555;
}
Soft hover feedback
Dim or brighten slightly on hover. Avoid huge scale transforms that shove neighbors around unless you plan stacking carefully.
.gallery a:hover img {
opacity: 0.88;
outline: 2px solid #0b5fff;
outline-offset: 2px;
}
A calm gallery habit
Even thumb boxes, wrap + gap, object-fit: cover, meaningful alt text. Prefer Flex/Grid lessons next for advanced responsive masonry — do not confuse this with dropdown menus.
.gallery { /* wrapping track */ }
.gallery__item { /* each thumb cell */ }
.gallery__img { /* the img */ }
.gallery__cap { /* optional caption */ }
Try it yourself
- Build a
.galleryflex wrap list of linked images. - Set shared width/height and
object-fit: cover. - Add a
figure/figcaptionon one item. - Style a soft hover opacity or outline.
- Write one sentence: what will Grid teach better than this wrap sketch?
Common mistakes
- Mixing random heights with no shared box or object-fit
- Zero gap so thumbs glue together
- Treating galleries like dropdown nested menus
- Absolute-positioning every thumb into a fragile pile
- Empty
alton meaningful photos
Summary
- Galleries are wrapping sets of even thumbnails
- Shared size +
object-fit: coverkeeps the rhythm tidy - Flex wrap + gap is a calm starter layout
- Captions and hover cues stay optional and light
- Flexbox/Grid modules deepen responsive galleries next
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top