Grid Intro

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Learn to build two-dimensional layouts

CSS Grid is a layout system that controls both rows and columns. It's a great fit for galleries, dashboards, template grids, and page layouts. Flexbox is great for aligning things along a single row, while Grid is great for building precise, table-like layouts.

css

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

You should see

Gallery items line up neatly in a 3-column grid.

Tip

If you're thinking about a layout in terms of both rows and columns, use Grid. For a single row, use Flexbox.