The Complete Guide to CSS Grid Layout in 2026

Why CSS Grid Changed Everything

Before CSS Grid, building complex two-dimensional layouts required float hacks, positioning tricks, or JavaScript. Grid gave browsers a native two-dimensional layout engine for the first time — making magazine layouts, dashboard UIs, and responsive card grids achievable in pure CSS. Every modern browser has supported Grid since April 2017.

The Grid Container Model

Apply display: grid to any element. Its direct children become grid items and flow into defined tracks automatically.

.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 64px 1fr 48px;
  min-height: 100vh;
  gap: 0;
}

This creates a two-column, three-row layout. The left column is a fixed 260px sidebar; the right takes all remaining space via the fr unit. The rows define header, content, and footer.

The fr Unit

The fr unit distributes available space after fixed columns and gaps. 1fr 2fr 1fr gives the middle column twice the space of each outer column. Unlike percentages, fr units automatically account for gap — no calc() needed.

Responsive Grids Without Media Queries

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

On 1200px this renders four columns. On 360px mobile it renders one — no breakpoints needed. auto-fill preserves empty tracks; auto-fit collapses them so items expand to fill the container.

Named Grid Areas

.page {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    "footer  footer  footer";
  grid-template-columns: 240px 1fr 1fr;
  grid-template-rows: 64px 1fr 48px;
  min-height: 100vh;
}
header  { grid-area: header; }
.sidebar{ grid-area: sidebar; }
main    { grid-area: main; }
footer  { grid-area: footer; }

Named areas are self-documenting and easy to restructure at breakpoints by redefining grid-template-areas — the HTML stays unchanged.

Grid Line Placement

.hero  { grid-column: 1 / -1;  /* full width */
          grid-row: 1 / 3; }    /* spans 2 rows */
.wide  { grid-column: span 2; }
.tall  { grid-row: 2 / 5; }

Negative line numbers count from the end of the explicit grid. -1 is always the last line — making full-width spans robust to column-count changes.

Implicit Grid and auto-rows

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 16px;
}

Without grid-auto-rows implicit rows collapse to content height. A minimum height gives consistent visual baseline across all rows.

CSS Subgrid

Subgrid (now in all modern browsers) lets children of a grid item participate in the parent's tracks. Before subgrid, aligning card titles, bodies, and buttons across a row required JavaScript or fixed heights:

.card {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
}

Dense Auto-Placement

Add grid-auto-flow: dense to backfill gaps with smaller items — ideal for image galleries where visual order matters less than filling space.

Grid vs Flexbox

Use Grid for two-dimensional layouts where rows and columns must align simultaneously. Use Flexbox for one-dimensional component internals. Most production UIs use both — Grid for page structure, Flexbox for nav bars and card internals.

CSS Grid makes complex, responsive, two-dimensional layouts achievable in pure CSS. Once you build your first named-area page layout, you will never return to float hacks or framework grid systems.