CSS Tutorial

CSS Image Gallery

An image gallery is a grid of thumbnails that share a consistent frame and spacing. With CSS flexbox or grid you can build a responsive gallery that reflows to fit any screen, add captions and borders, and layer on a hover zoom. This guide builds a real gallery you can run and edit.

What is a CSS Image Gallery?

A gallery presents several images together in a tidy, uniform layout. Each item usually sits inside a bordered card with the image, an optional caption, and some padding. The layout engine - flexbox or CSS grid - handles spacing and wrapping so the gallery adapts to the available width.

A Single Gallery Card

Start with one card: a bordered container holding an image and a caption. object-fit: cover crops each image to fill its box without distortion, so mismatched photo sizes still line up.

The gallery item

.gallery {
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
}
.gallery img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

Responsive Gallery with CSS Grid

The example below uses a single grid rule to build a fully responsive gallery. repeat(auto-fill, minmax(140px, 1fr)) fits as many 140px-or-wider columns as will fit, then wraps to the next row. Coloured blocks stand in for photos so the example runs offline.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: system-ui, sans-serif; padding: 16px; background: #f8fafc; }
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
  .card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; text-align: center; }
  .photo { height: 110px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: bold; }
  .p1 { background: #0ea5e9; } .p2 { background: #22c55e; } .p3 { background: #f97316; }
  .p4 { background: #8b5cf6; } .p5 { background: #ef4444; } .p6 { background: #14b8a6; }
  .caption { padding: 8px; font-size: 13px; color: #475569; }
</style>
</head>
<body>
  <div class="grid">
    <div class="card"><div class="photo p1">1</div><div class="caption">Sunrise</div></div>
    <div class="card"><div class="photo p2">2</div><div class="caption">Forest</div></div>
    <div class="card"><div class="photo p3">3</div><div class="caption">Desert</div></div>
    <div class="card"><div class="photo p4">4</div><div class="caption">Nightfall</div></div>
    <div class="card"><div class="photo p5">5</div><div class="caption">Canyon</div></div>
    <div class="card"><div class="photo p6">6</div><div class="caption">Lagoon</div></div>
  </div>
</body>
</html>

💡

auto-fill vs auto-fit: auto-fill keeps empty column tracks when there are few items, while auto-fit collapses them so the existing cards stretch to fill the row. Swap them to see which layout you prefer.

Gallery with Hover Zoom

A subtle zoom on hover makes a gallery feel interactive. Wrap each image in a container with overflow: hidden, then scale the image up on hover. The overflow clip keeps the enlarged image inside its frame.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: system-ui, sans-serif; padding: 16px; }
  .row { display: flex; gap: 12px; flex-wrap: wrap; }
  .frame { width: 150px; height: 110px; border-radius: 10px; overflow: hidden; }
  .frame .fill { width: 100%; height: 100%; transition: transform 0.4s; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: bold; }
  .frame:hover .fill { transform: scale(1.2); }
  .a { background: #6366f1; } .b { background: #ec4899; } .c { background: #10b981; }
</style>
</head>
<body>
  <div class="row">
    <div class="frame"><div class="fill a">Hover</div></div>
    <div class="frame"><div class="fill b">Hover</div></div>
    <div class="frame"><div class="fill c">Hover</div></div>
  </div>
</body>
</html>

Useful Gallery Properties

Property	Role in the gallery
display: grid / flex	Arranges thumbnails into rows that wrap
gap	Adds even spacing between items without margins
object-fit: cover	Crops images to a uniform box without stretching
overflow: hidden	Clips a zoomed image to its frame
transform: scale()	Enlarges the image on hover
border-radius	Rounds the card corners for a softer look

⚠️

Always give gallery images width and height (or an aspect-ratio) so the page does not jump around as photos load. Missing dimensions cause layout shift and hurt performance scores.

Key points

A gallery is a set of uniform, bordered cards laid out with grid or flexbox.
grid-template-columns with repeat(auto-fill, minmax(...)) creates a responsive, wrapping layout.
object-fit: cover keeps every thumbnail the same size without distortion.
Use overflow: hidden plus transform: scale() for a contained hover zoom.
Set image dimensions to avoid layout shift while pictures load.