The Complete Guide to CSS Grid in 2026

CSS Grid is the most powerful layout system on the web — it lays content out in two dimensions, rows and columns at once, with precise control over sizing and placement. This complete guide covers defining a grid, the special units (fr, minmax, repeat), placing items, template areas, responsive grids and subgrid, with copy-paste code.

Defining a grid

Set display: grid and declare your columns (and optionally rows) with grid-template-columns. The fr unit represents a fraction of the available space, so 1fr 1fr makes two equal columns.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* three equal columns */
  grid-template-rows: auto 1fr auto;   /* header, body, footer */
  gap: 16px;
}

repeat(), fr and minmax()

Three functions do most of the work. repeat() avoids repetition, fr shares space, and minmax() sets a size range so tracks stay within bounds.

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);          /* 4 equal columns */
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 cols that can shrink */
  grid-template-columns: 200px 1fr;               /* fixed sidebar + fluid main */
}

gap

gap (formerly grid-gap) sets the spacing between rows and columns — cleaner than margins and consistent across the whole grid.

.grid { display: grid; gap: 24px; }        /* both directions */
.grid { row-gap: 24px; column-gap: 16px; }  /* separately */

Placing items

By default items auto-flow into cells. To position or span an item, use grid-column and grid-row with line numbers or span. Grid lines are numbered starting at 1 (and count from the end with negatives).

.hero {
  grid-column: 1 / 3;     /* from line 1 to line 3 (spans 2 columns) */
  grid-row: span 2;       /* span 2 rows */
}
.full { grid-column: 1 / -1; }  /* span the whole width */

grid-template-areas

For readable page layouts, name regions with grid-template-areas and assign each item to an area. The layout becomes a visual map right in the CSS — easy to read and to rearrange responsively.

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

Responsive grids without media queries

One of Grid’s best tricks: a responsive card layout that reflows automatically, no media queries. auto-fit (or auto-fill) with minmax() fits as many columns as will fit at a minimum width, then wraps.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
/* cards are at least 240px wide and fill the row, wrapping as needed */

Alignment

Grid aligns in both dimensions. justify-items/align-items position content within each cell; justify-content/align-content position the whole grid within the container when it’s smaller than the available space.

.grid {
  justify-items: center;   /* horizontal within cells */
  align-items: center;     /* vertical within cells */
  place-items: center;     /* shorthand for both */
}

Subgrid

subgrid lets a nested grid adopt its parent’s track lines, so items in different child grids line up perfectly (for example, card titles and buttons aligning across a row of cards). It’s Baseline (widely available) across browsers in 2026.

.card {
  display: grid;
  grid-template-rows: subgrid;   /* inherit the parent grid's rows */
  grid-row: span 3;
}

Common layouts

Holy-grail page (header, sidebar, main, footer)

.page {
  display: grid;
  grid-template: auto 1fr auto / 220px 1fr;
  min-height: 100vh;
}

Auto-responsive card grid

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }

CSS Grid cheat sheet

• display: grid + grid-template-columns defines the columns.
• fr shares free space; repeat(n, …) repeats tracks; minmax(min, max) bounds them.
• Use minmax(0, 1fr) to let tracks shrink and prevent overflow.
• grid-column / grid-row place and span items by line number or span.
• grid-template-areas gives a readable, named layout map.
• repeat(auto-fit, minmax(…, 1fr)) makes responsive grids with no media queries.
• subgrid aligns nested grids to the parent’s tracks.

Build grid layouts live in XCODX Studio — edit CSS and see the result instantly. See also the complete guide to CSS Flexbox, Flexbox vs CSS Grid and how to optimize CSS.