CSS Grid Complete Guide: From Basics to Subgrid

CSS Grid is the most powerful layout system ever added to CSS. Unlike Flexbox (which is one-dimensional), Grid lets you control layout in both axes simultaneously. This guide covers everything from your first grid to modern subgrid patterns.

The Core Concepts

A grid has two parts: the grid container (the parent) and grid items (the children).

.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3 columns */
  grid-template-rows: auto;             /* rows sized by content */
  gap: 1rem;                            /* space between cells */
}

The fr Unit

The fr (fraction) unit distributes available space proportionally:

/* Three equal columns */
grid-template-columns: 1fr 1fr 1fr;

/* Sidebar + content: sidebar fixed, content fills rest */
grid-template-columns: 260px 1fr;

/* Three columns, middle column is twice as wide */
grid-template-columns: 1fr 2fr 1fr;

Essential Grid Patterns

Responsive Card Grid

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

auto-fill + minmax is the magic combo: cards are at least 280px wide, fill available space, and wrap automatically. No media queries needed.

Holy Grail Layout

.layout {
  display: grid;
  grid-template-areas:
    'header header header'
    'nav    main   aside'
    'footer footer footer';
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header { grid-area: header; }
.nav    { grid-area: nav; }
.main   { grid-area: main; }
.aside  { grid-area: aside; }
.footer { grid-area: footer; }

Named grid areas make complex layouts readable and easy to rearrange with media queries.

Placing Items Explicitly

.featured {
  grid-column: 1 / 3; /* spans from line 1 to line 3 */
  grid-row: 1 / 2;
}

/* Shorthand */
.banner {
  grid-column: span 2; /* span 2 columns from auto position */
}

Alignment

Grid gives you precise alignment control on both axes:

.container {
  /* Align all items within their cells */
  justify-items: center;  /* horizontal */
  align-items: center;    /* vertical */

  /* Align the whole grid within the container */
  justify-content: space-between;
  align-content: start;
}

/* Individual item override */
.special {
  justify-self: end;
  align-self: stretch;
}

Subgrid (Modern CSS)

Subgrid lets children participate in the parent's grid — solving the "aligned card footer" problem without JavaScript:

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}

.card {
  display: grid;
  grid-row: span 3; /* card spans 3 rows */
  grid-template-rows: subgrid; /* children align to parent grid */
}

/* Now card title, body, and CTA all align across cards */
.card-title  { grid-row: 1; }
.card-body   { grid-row: 2; }
.card-footer { grid-row: 3; }

Browser support: Chrome 117+, Firefox 71+, Safari 16+. Safe for production.

Grid vs Flexbox

They're not competitors — most layouts use both. Grid for the outer structure, Flexbox for inner components.

Quick Tip: Visualize with DevTools

Chrome and Firefox DevTools have a Grid inspector (the grid badge in the Elements panel). It overlays grid lines, numbers, and area names on the page — invaluable for debugging.

Generate Grids Visually

Try HeoLab's CSS Grid Generator to build your grid configuration visually and get clean CSS output ready to paste into your project.