Image Gallery

You will build a responsive image gallery by placing thumbnails in a CSS Grid and making each image fill its cell without distortion.

What it is

An image gallery is a collection of thumbnails arranged in rows and columns. In CSS, the most direct mental model is a grid: the container defines columns, and each child becomes a cell. The container is the layout engine; the images are content inside cells. Related terms include grid-template-columns, gap, object-fit, and auto-fill.

Why it matters

• It keeps thumbnails aligned without fragile floats or absolute positioning.
• It adapts to different screen widths when columns are defined with minmax().
• It preserves image quality by separating layout size from image cropping.
• It makes galleries easier to maintain because spacing is controlled by one gap property.

Syntax or steps

1. Create a container element and set display: grid.
2. Define columns with grid-template-columns.
3. Add spacing with gap.
4. Make images fill their cells with width: 100%.
5. Use object-fit: cover so images crop neatly instead of stretching.

Example

<ul class="gallery">
  <li><img src="photo-1.jpg" alt="Sunset over the harbor"></li>
  <li><img src="photo-2.jpg" alt="Mountain trail"></li>
  <li><img src="photo-3.jpg" alt="City street"></li>
</ul>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gallery img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 4px;
}

Part-by-part explanation

The <ul> is the grid container. repeat(auto-fill, minmax(160px, 1fr)) means: create as many columns as fit, but each column should be at least 160px wide and share extra space equally. gap: 8px adds space between rows and columns. The image rule makes each thumbnail fill its cell, while object-fit: cover crops the image to the cell shape. display: block removes the small inline gap under images.

Common mistakes

• Using repeat(3, 1fr) only. It works on desktop but can make tiny thumbnails on phones. Use auto-fill or media queries for responsiveness.
• Setting only width: 100% without object-fit. Tall or wide images may look stretched. Add height and object-fit: cover.
• Forgetting to reset list styles. A <ul> may add bullets and padding, breaking alignment. Set list-style: none, margin: 0, and padding: 0.
• Using margins on every image instead of gap. Margins can create uneven outer spacing. Prefer gap on the grid container.

When to use it

Use CSS Grid when you want a two-dimensional gallery with predictable rows and columns. Use Flexbox when the gallery is a single scrolling row or when items should wrap based on content size.

Practice

Guided exercise: Create a gallery with four images and change minmax(160px, 1fr) to minmax(220px, 1fr). Expected result: fewer columns appear on the same screen because each column needs more minimum width.

Challenge: Add a caption under each image without breaking the grid. Hint: put the image and caption inside the same <li>, then style the <li> as a card.

Quick check

Question: Why is object-fit: cover useful in an image gallery?

Answer: It crops the image to fill the thumbnail box while preserving the image’s aspect ratio, preventing distortion.

Summary

A CSS Grid gallery separates layout from image presentation: the container controls columns and spacing, while each image controls how it fills its cell. This pattern scales well because the same rules can produce one, two, three, or more columns depending on available width.