LESSON 20

CSS Grid Basics

Learning objective: Create two-dimensional layouts with CSS Grid.

Understand

CSS Grid arranges content in rows and columns at once.

Set display: grid and define columns with grid-template-columns. Units like fr split available space into fractions. Grid is ideal for two-dimensional layouts, while flexbox suits one dimension.

Analogy: Grid is like a chessboard: you place items into defined rows and columns.

See It in Action

A three-column grid:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
How it works: Three 1fr columns share the width equally, and gap spaces the cells evenly.

Try It Yourself

  1. Make a grid with three equal columns.
  2. Change one column to 2fr.
  3. Add gap between cells.

Quick Quiz

What does the fr unit represent in Grid?

Challenge

Lay out six items in a three-column grid.

Success condition: Your six items form a tidy three-column grid.