CSS Grid

Flexbox is brilliant for a row or a column. But a whole page is not a row or a column — it is both at once. A page has a header across the top, a sidebar and main content side by side, and a footer across the bottom. That is a two-dimensional layout, and that is exactly what CSS Grid is for.

Diagram — see how it fits together

Grid works like a table drawn with CSS: you tell the container how many columns and rows it has, and each item drops into a cell. You can make an item span two columns, or place it by name using grid areas — which is how most modern page layouts are built.

The grid container

Like Flexbox, Grid starts with display: grid on the container. Then grid-template-columns defines the columns. The fr unit means "one share of the free space": 1fr 1fr 1fr gives three equal columns, and 2fr 1fr gives a wide column and a narrow one. gap puts even space between all the cells.

Syntax — three equal columns

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
}

There is no need to set widths on the items at all. The grid decides the columns, and each item takes the next free cell automatically, left to right, row by row.

Grid areas — a whole page in five lines

For a page layout, named areas are the clearest way to work. You draw a little map with grid-template-areas, giving each part a name — header, sidebar, main, footer — and then each element says which area it belongs to with grid-area. The map itself shows the layout at a glance.

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

Each row of the map is one line of text in quotes, and each word is one cell. Writing "header header" means the header spans both columns. The number of words in each row must match the number of columns.

Common mistakes

• Setting display: grid on the items instead of the container — like Flexbox, Grid only works from the parent.
• Writing a different number of words in each grid-template-areas row — every row must have exactly as many words as there are columns.
• Using fixed pixel columns like 200px 200px 200px for a gallery — on a phone the grid overflows. Use 1fr or repeat() so the columns shrink.
• Forgetting grid-area on an element — the element lands in the next free cell instead of the area you drew for it.
• Choosing Grid for a single row of links — Flexbox is simpler there; save Grid for layouts that need rows and columns together.

Remember

• Grid is two-dimensional: rows and columns together.
• The container gets display: grid; grid-template-columns defines the columns.
• 1fr means one share of the free space; repeat(3, 1fr) makes three equal columns.
• grid-template-areas draws a map of the layout; grid-area places each element on it.
• Use Grid for page layouts and galleries, Flexbox for single rows.

Example explained

• .page { display: grid; } — the whole page becomes a grid container, so its four parts can be placed on a map instead of stacking one after another.
• grid-template-columns: 200px 1fr — the sidebar gets a fixed 200px column and the main content takes whatever space is left.
• grid-template-areas — the three-row map: the header spans both columns, then sidebar and main sit side by side, then the footer spans both columns again.
• header { grid-area: header; } and the matching rules for the sidebar, main, and footer — each element is told which named area on the map it belongs to.
• .gallery { grid-template-columns: repeat(3, 1fr); } — inside the main area, a second smaller grid makes three equal photo boxes with a 10px gap between them.