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

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:

• Explores justify-content and align-content visually
• Shows how tracks distribute in real-time
• Exports clean CSS

Try it here

100% client-side. Nothing uploaded.

---

What's the most confusing part of CSS Grid for you? Let me know in the comments.