Code / Web Basics: HTML & CSS / Unit 4: Layout: flexbox, grid and phones

CSS grid: product galleries CSS ग्रिड: प्रोडक्ट गैलरी

Lesson 11 of 14 · about 15 minutes · Rows and columns at once with display: grid.

⚡ 0 XP

Step 1 of 2

Columns with grid-template-columns

Flexbox is great for one row. Grid handles rows and columns together — perfect for a product gallery.

display: grid; on the parent
grid-template-columns: repeat(3, 1fr); — three equal columns (fr = a fraction of the free space)
gap: 12px; — space between rows and columns

The children fill the grid automatically, left to right, row by row.

Example

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

🎯 Challenge: Toy shop gallery +20 XP

Turn .gallery into a grid with columns (for example three equal columns with repeat(3, 1fr)) and a gap.

Try twice to unlock the solution (0/2)

style.cssCtrl ⏎

Preview

Console

Output from console.log appears here.

Checklist

Press Run to check your code.

.gallery is a grid
The grid has columns
There is a gap between items

Lesson notes (text version)

1. Columns with grid-template-columns

Flexbox is great for one row. Grid handles rows and columns together — perfect for a product gallery.

display: grid; on the parent
grid-template-columns: repeat(3, 1fr); — three equal columns (fr = a fraction of the free space)
gap: 12px; — space between rows and columns

The children fill the grid automatically, left to right, row by row.

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

Challenge: Toy shop gallery

Turn .gallery into a grid with columns (for example three equal columns with repeat(3, 1fr)) and a gap.

2. A featured item that spans columns

A grid child can take up more than one cell. grid-column: span 2; makes an item two columns wide — great for a "Deal of the day" or a featured product.

You can also give a start and end line: grid-column: 1 / 3; means "from line 1 to line 3", which is also two columns.

                .featured {
  grid-column: span 2;
  background-color: gold;
}

Challenge: Deal of the day

The gallery grid is ready. Make the .featured item span 2 columns and give it a different background colour so it stands out.