Summary - Photo gallery

Build a photo gallery grid with CSS grid.

Summary: a photo gallery grid

In this group you learned four cornerstones: display: grid opens the container, grid-template-columns draws the columns, gap adds space between cells, and repeat() shortens repetitions.

Bring the four together and a real photo gallery grid emerges: tidy rows of many images with little code. Now we will build it from scratch.

Exercise Build the three-column photo gallery

Build a full grid template for .gallery: add display: grid, grid-template-columns: repeat(3, 1fr) and gap: 16px.

Show example solution

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

Exercise Four-column product cards

Now build a store grid: add display: grid, grid-template-columns: repeat(4, 1fr) and gap: 24px to .product-grid.

Show example solution

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

Test yourself

Which declaration puts 20px on both axes?
```
/* add spacing to the gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  ?
}
```
- padding: 20px
- margin: 20px
- gap: 20px
- spacing: 20px
Show answer

gap: 20px — Correct. gap: 20px puts 20 pixels between both rows and columns.

Three-column gallery template

.gallery {
  display: grid;
  grid-template-columns: ____;
  gap: 16px;
}

Show answer

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

Next lesson: Grid-column

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies