CSS Grid: Complete Guide

CSS Grid is a two-dimensional layout system that lets you control both rows and columns at the same time. While flexbox handles one direction beautifully, Grid handles the whole page.

Getting Started

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

That's it — you now have a 3-column grid with consistent spacing.

Defining Rows and Columns

grid-template-columns

/* Fixed widths */
grid-template-columns: 200px 200px 200px;

/* Fractional units — responsive */
grid-template-columns: 1fr 2fr 1fr;

/* Repeat shorthand */
grid-template-columns: repeat(3, 1fr);

/* Mixed */
grid-template-columns: 250px 1fr 250px;

fr (fraction) is Grid's killer feature. 1fr means "one equal share of available space."

grid-template-rows

grid-template-rows: 80px 1fr 60px; /* header, content, footer */

Implicit vs Explicit Grid

Rows and columns you define are explicit. If more items exist than cells defined, Grid creates implicit tracks automatically:

grid-auto-rows: minmax(100px, auto); /* implicit rows are at least 100px */

Placing Items

Line-Based Placement

Grid lines are numbered starting from 1:

.item {
  grid-column: 1 / 3;  /* span columns 1 to 3 (takes 2 cols) */
  grid-row: 1 / 2;     /* first row only */
}

Span Syntax

.wide-item {
  grid-column: span 2; /* span 2 columns from wherever it lands */
}

.tall-item {
  grid-row: span 3;    /* span 3 rows */
}

Grid Areas

Name areas in your layout like a visual map:

.container {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar content aside"
    "footer  footer  footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 80px 1fr 60px;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

Grid areas make complex layouts readable and easy to modify.

Responsive Patterns

Auto-Fill and Auto-Fit

The magic formula for responsive grids without media queries:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

• auto-fill — creates as many columns as fit, even empty ones
• auto-fit — creates as many as fit AND stretches them to fill space
• minmax(250px, 1fr) — each column is at least 250px, up to 1fr

Use auto-fit when you want items to stretch. Use auto-fill when you want consistent widths.

Responsive Layout with Grid Areas

/* Desktop */
grid-template-areas:
  "header header"
  "sidebar content"
  "footer footer";

/* Mobile */
@media (max-width: 768px) {
  grid-template-areas:
    "header"
    "content"
    "sidebar"
    "footer";
  grid-template-columns: 1fr;
}

Alignment

Container-Level

.container {
  justify-items: center;  /* horizontal alignment of all items */
  align-items: center;    /* vertical alignment of all items */
  justify-content: center; /* horizontal alignment of the grid itself */
  align-content: center;   /* vertical alignment of the grid itself */
}

Item-Level

.item {
  justify-self: end;    /* horizontal alignment of this item */
  align-self: stretch;  /* vertical alignment of this item */
}

Advanced Features

minmax()

Set minimum and maximum sizes for tracks:

grid-template-columns: minmax(200px, 1fr) minmax(400px, 2fr);

Subgrid

Let a grid item's children align to the parent grid:

.nested {
  display: grid;
  grid-template-columns: subgrid;
}

Note: subgrid support is still growing across browsers.

Common Patterns

Dashboard Layout

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 64px 1fr;
  min-height: 100vh;
}

Photo Gallery

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

.featured {
  grid-column: span 2;
  grid-row: span 2;
}

Card Layout with Equal Heights

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

Grid automatically makes all cards in a row the same height — something flexbox can't do easily.

Grid vs Flexbox Cheat Sheet

Use Grid when:

• You need a 2D layout (rows AND columns)
• You want equal-height cards in a row
• You're building page-level layouts
• You need named grid areas

Use Flexbox when:

• You need a 1D layout (row OR column)
• Content size should determine layout
• You're building component-level layouts
• You need items to wrap naturally

Key Takeaways

1. display: grid + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) = instant responsive grid
2. fr units make flexible layouts dead simple
3. Grid areas make complex layouts readable
4. Grid handles 2D, flexbox handles 1D — use both together
5. gap works the same way in both grid and flexbox