CSS Grid: A Practical Guide to Two-Dimensional Layout

Guide · Updated 2026-07-28 · Yexla Team

CSS Grid lays out both rows and columns at once — the layout system pages were waiting twenty years for. Build intuition in the grid generator as you go.

The core: template columns and fr

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

The fr unit shares leftover space: 2fr 1fr gives the first column twice the width. Mix freely with fixed units: 240px 1fr is the classic sidebar layout in one line.

The famous one-liner: responsive without media queries

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

Cards automatically reflow from 4 columns to 1 as space shrinks — no breakpoints. auto-fit collapses empty tracks; auto-fill preserves them (useful when you want consistent card widths even with few items).

Named areas: layouts you can read

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

Rearranging the layout at a breakpoint is now just rewriting the ASCII picture.

Placement and spanning

grid-column: span 2 makes an item two columns wide; grid-column: 1 / -1 spans the full width. Items can share cells for intentional overlaps — z-index applies. For the classic 12-column math, our layout grid calculator generates the numbers.