CSS Grid Explained 🪟

Two-dimensional layout with rows and columns in a few lines.

Where Flexbox handles one direction, Grid handles two — rows and columns at the same time. It’s the cleanest way to build page-level layouts.

Define a grid

Set display: grid on the container, then describe your columns with grid-template-columns.

.grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1rem;
}

The fr unit means "fraction of leftover space." Above: a fixed 200px sidebar and a flexible main column.

Equal columns, fast

repeat() saves typing — three equal columns:

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Responsive with no media queries

This single line makes columns wrap automatically as space allows:

.auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

Each item is at least 200px wide; the grid fits as many as it can per row and reflows on resize.

Placing items

Need a block to span two columns? On the child:

.featured {
  grid-column: span 2;
}

TL;DR: display: grid + grid-template-columns + gap gives you real 2D layouts; auto-fit + minmax() makes them responsive for free.

Try the auto-fit snippet on a list of cards and resize the window — instant responsive grid.