CSS Grid

What CSS Grid is

Grid is the two-dimensional layout system: you define rows and columns on the parent, and the children sit in cells. It's the most powerful layout tool in CSS.

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

The fr unit

fr = a fraction of the remaining space. 1fr 2fr → the second column is twice as wide as the first.

A responsive grid without media queries

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

As many columns of at least 16rem as fit; the rest is shared equally. On mobile — one column, on desktop — 3 or 4, automatically.

auto-fit vs auto-fill: with few items, auto-fit stretches them to fill the row; auto-fill keeps empty columns.

Placing children

.featured { grid-column: span 2; }        /* takes 2 columns */
.full     { grid-column: 1 / -1; }        /* from the first line to the last */
.sidebar  { grid-row: 1 / 3; }            /* two rows */

Grid lines are numbered from 1; -1 is the last one.

Named areas

For page layouts, areas are the most readable option:

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.layout header { grid-area: header; }
.layout aside  { grid-area: sidebar; }

Alignment

Grid layout types — and when

Summary

• Grid = rows + columns, defined on the parent.
• fr splits the remaining space; minmax + auto-fit = responsive without media queries.
• Flex for one axis, grid for two.

Official sources

• MDN — Grids
• MDN — Basic concepts of grid layout
• Grid Garden (game)