CSS Grid

1Columns, gaps and the fr unit

Turn an element into a grid, then describe its columns with grid-template-columns:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* three equal columns */
  gap: 12px;
}

The star here is the fr unit — a "fraction" of the free space. 1fr 1fr 1fr means three equal columns; 2fr 1fr means the first column is twice as wide as the second. No percentages, no maths.

And repeat() saves typing: grid-template-columns: repeat(3, 1fr) is the same as 1fr 1fr 1fr. The gap property adds even gutters between every cell.

2Spanning cells and responsive grids

An item can span several columns with grid-column:

.feature {
  grid-column: span 2;  /* take up two columns */
}

A grid that responds on its own

Here's a small piece of magic. This one line builds a grid that automatically fits as many columns as will comfortably fit, then wraps — no media queries needed:

grid-template-columns:
  repeat(auto-fit, minmax(200px, 1fr));

It reads: "make as many columns as fit, each at least 200px wide, sharing space equally." On a wide screen you get four columns; on a phone, one — automatically. It's a favourite for card galleries.

3Play with the grid — live

Drag the sliders below to change the number of columns, the item count and the gap, and watch the grid rebuild instantly. Notice how items flow into the columns and wrap onto new rows on their own.