CSS Grid Justify-Content vs Align-Content: The Difference Explained

dev.to CSS2026-10-26 16:210 views

CSS Grid justify-content is confusing.

You set it and nothing changes. You realize it only works if the grid tracks don't fill the container. You mix it up with align-content.

Let's break down how alignment actually works in CSS Grid.

The Core Issue: Empty Space

Both justify-content and align-content do the same thing: they distribute empty space in a container.

If your grid tracks take up 100% of the container's width or height, there is no empty space. Therefore, these properties do nothing.

You only see the effect when your grid tracks are smaller than the container.

Justify-Content (The Horizontal Axis)

justify-content aligns the grid columns (tracks) along the inline (horizontal) axis.

.container { display: grid; grid-template-columns: 100px 100px; /* Only 200px wide */ width: 400px; /* Container is 400px wide */ justify-content: center; }

Because there is 200px of empty space, justify-content: center pushes the columns to the middle.

Common values:

start (default)
center
end
space-between
space-around
space-evenly

Align-Content (The Vertical Axis)

align-content aligns the grid rows (tracks) along the block (vertical) axis.

.container { display: grid; grid-template-rows: 100px 100px; /* Only 200px tall */ height: 400px; /* Container is 400px tall */ align-content: center; }

This pushes the rows to the vertical center.

The Nested Grid Trap

A common failure point is a nested grid (a grid inside a grid item).

If you apply align-content to an inner grid, it does nothing because the inner grid collapses to the height of its content.

.outer-grid { display: grid; height: 400px; } .inner-grid { display: grid; /* align-content: center; This will DO NOTHING */ height: 100%; /* You must set height: 100% to give it space to distribute */ align-content: center; /* Now it works */ }

Justify vs Align Cheat Sheet

justify-content aligns tracks horizontally (left to right).
align-content aligns tracks vertically (top to bottom).

justify-items aligns the content inside the grid items horizontally.
align-items aligns the content inside the grid items vertically.

Prototyping Visually

If you want to understand exactly how align-content and justify-content distribute tracks without writing code and reloading the browser, I built a free CSS Grid Justify-Content Explorer.

What it does: