CSS Grid Layout: The Complete Guide with Examples

CSS Grid is the most powerful layout system in CSS. While Flexbox handles one-dimensional layouts, Grid gives you full control over both rows and columns simultaneously. This guide covers everything from basic grids to advanced patterns like named areas and responsive layouts.

When to Use Grid vs Flexbox

The simplest rule: use Grid when you need to control layout in two dimensions (rows and columns), and Flexbox when you only need one. In practice, most pages use both — Grid for the overall page structure, Flexbox for the components inside it.

Creating Your First Grid

Add display: grid to a container, then define your columns and rows:

CSS

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

This creates a three-column layout: two fixed 200px sidebars with a flexible center column. The 1fr unit means “one fraction of the remaining space.”

The fr Unit

The fr unit is Grid's superpower. It distributes available space proportionally:

CSS

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

/* Left column gets twice the space */
grid-template-columns: 2fr 1fr;

/* Fixed sidebar + flexible main */
grid-template-columns: 250px 1fr;

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

Unlike percentages, fr distributes space after accounting for gaps and fixed-size tracks. This means you never have to do math like calc(33.33% - 16px).

repeat() and minmax()

These two functions eliminate repetition and make grids responsive:

CSS

/* Instead of: 1fr 1fr 1fr 1fr */
grid-template-columns: repeat(4, 1fr);

/* Auto-fill: as many 250px columns as fit */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

/* Auto-fit: same, but collapses empty tracks */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

The repeat(auto-fit, minmax(250px, 1fr)) pattern is the single most useful Grid declaration. It creates a fully responsive grid with no media queries — columns are at least 250px wide and expand to fill available space.

Placing Items

By default, items fill the grid in order, one per cell. You can place them explicitly using line numbers:

CSS

.header {
  grid-column: 1 / -1;  /* span all columns (1 to last) */
}

.sidebar {
  grid-column: 1 / 2;   /* first column */
  grid-row: 2 / 4;      /* span rows 2 and 3 */
}

.main {
  grid-column: 2 / -1;  /* from column 2 to the end */
}

/* Shorthand: span a number of tracks */
.wide-card {
  grid-column: span 2;  /* take up 2 columns */
}

Line numbers start at 1. Negative numbers count from the end, so -1 means the last line. This is especially useful for full-width elements like headers and footers.

Named Grid Areas

For complex layouts, named areas make your CSS read like a visual map of the page:

CSS

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

/* Responsive: stack on mobile */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

Each string in grid-template-areas represents a row. Use the same name across cells to span that area. Use a . for empty cells.

Alignment

Grid has two sets of alignment properties — one for the grid tracks within the container, and one for items within their cells:

CSS

/* Align items within their cells */
justify-items: start | center | end | stretch;  /* horizontal */
align-items: start | center | end | stretch;    /* vertical */

/* Align a single item (override) */
justify-self: center;
align-self: end;

/* Align the entire grid within the container */
justify-content: center;  /* horizontal */
align-content: center;    /* vertical */

/* Center everything */
place-items: center;      /* shorthand for align-items + justify-items */

Common Patterns

1. Responsive Card Grid

The most common Grid pattern — cards that automatically wrap and resize:

CSS

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

/* No media queries needed — it's responsive by default */

2. Dashboard Layout

A sidebar + main content area with a top navigation bar:

CSS

.dashboard {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "nav    nav"
    "sidebar content";
  height: 100vh;
}

.nav     { grid-area: nav; }
.sidebar { grid-area: sidebar; overflow-y: auto; }
.content { grid-area: content; overflow-y: auto; padding: 24px; }

3. Photo Gallery with Featured Image

A large featured image with smaller thumbnails:

CSS

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 200px);
  gap: 8px;
}

.gallery .featured {
  grid-column: span 2;
  grid-row: span 2;    /* takes 4 cells */
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

4. Magazine / Masonry-Style Layout

Articles of varying sizes, placed on a fixed grid:

CSS

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

.article-large  { grid-column: span 2; grid-row: span 2; }
.article-tall   { grid-row: span 2; }
.article-wide   { grid-column: span 2; }

Quick Reference

Property	Applied To	What It Does
`display: grid`	Container	Enables Grid layout
`grid-template-columns`	Container	Defines column tracks
`grid-template-rows`	Container	Defines row tracks
`grid-template-areas`	Container	Names grid regions
`gap`	Container	Space between tracks
`justify-items`	Container	Horizontal alignment in cells
`align-items`	Container	Vertical alignment in cells
`grid-column`	Item	Column placement / span
`grid-row`	Item	Row placement / span
`grid-area`	Item	Assigns item to named area

Ship your CSS Grid layouts

Built a responsive layout and ready to deploy? Netlify deploys frontend sites from Git with automatic CI/CD, preview deploys, and a generous free tier. Push your code and your Grid layout is live in seconds.

Build Grid Layouts Visually

Use our CSS Grid Generator to visually design your grid and get the CSS instantly. For one-dimensional layouts, try the CSS Flexbox Generator. Both tools run entirely in your browser with no signup required.