CSS grid

Build a two-dimensional layout

Lesson 8 of 20 · 9 min · Module 3: Layouts that adapt

Grid lays out content in rows and columns. It is useful for dashboards, galleries, and collections of cards.

Free. No installation: you write and run the code in your browser, and it is checked automatically.

By the end, you’ll be able to…

Choose grid for rows and columns
Define flexible tracks with fr units
Control spacing through the parent

The idea

Set display: grid on the parent. repeat(3, 1fr) creates three equal flexible tracks, and gap controls space between them.

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

01Let the parent own the layout

Direct children become grid items. Their placement follows the parent’s track definitions, so each card does not need a separate percentage width.

02Compare grid and flexbox

Flexbox is often convenient for distributing items along one axis. Grid gives explicit control over both rows and columns. Many pages use both for different components.

Your turn

Make .tiles a grid with three equal columns and a 16px gap. Keep exactly three direct article children.

What the checks look for

Grid creates three equal columns
Gap is 16px
All three cards are present

Try it in the editor →

Take this with you

Describe a layout in tracks, then let the browser distribute the available space.