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; }