🧭 justify-content — Aligning the Entire Grid in CSS Grid

🌐 What is justify-content?

justify-content is a CSS Grid property used to control thehorizontal alignment of the entire grid inside its container. Unlike justify-items (which aligns items inside cells),justify-content moves the whole grid as a block.

>>“justify-content doesn’t move grid items inside cells — it moves the whole grid.”

📌 When does justify-content work?

justify-content only works when:

  • The grid’s total width is smaller than the container width
  • You have extra free space horizontally

Note

💡 If your grid spans the full width (e.g., 1fr columns),justify-content will have no visible effect.

🎯 Available Values

ValueDescription
startAligns the grid to the left
centerCenters the grid horizontally
endAligns the grid to the right
space-betweenMax spacing between columns
space-aroundEqual spacing around each track
space-evenlyEven spacing between all tracks

🧪 Basic Example

Center the entire grid

.container {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  justify-content: center;
}

The grid is centered inside the container, not stretched.

📐 Visual Example

Media content

🧱 Example Using All Values

justify-content Variations

.start        { justify-content: start; }
.center       { justify-content: center; }
.end          { justify-content: end; }
.spaceBetween { justify-content: space-between; }
.spaceAround  { justify-content: space-around; }
.spaceEvenly  { justify-content: space-evenly; }

🧠 justify-content vs justify-items

PropertyWhat It Aligns
justify-itemsItems inside each cell (horizontal)
justify-contentThe entire grid structure (horizontal)

Note

⚡ Don’t confuse the two —
• justify-items = item alignment
• justify-content = grid alignment

📦 Real-World Use Cases

  • Centering a fixed-width grid inside a wide screen
  • Aligning product cards to the left or right
  • Creating evenly spaced navigation grids
  • Aligning dashboard widgets horizontally

🧩 Responsive Example

Responsive justify-content

.container {
  grid-template-columns: repeat(3, 200px);
  justify-content: center;
}

@media (min-width: 1024px) {
  .container {
    justify-content: space-between;
  }
}

On smaller screens → items are centered
On large screens → spacing is distributed evenly

⚠️ Common Mistakes

  • Trying to use justify-content when grid columns use fr units
  • Expecting it to align individual items (use justify-items instead)
  • Using justify-content on grid items instead of the container

Note

🧠 If nothing happens when you use justify-content: Your grid is likely already full width!

🔥 Summary

justify-content controls how the entire grid is positioned horizontally inside its container. It’s essential for centered layouts, evenly spaced tracks, and responsive design patterns.

>>“justify-content moves the grid as a whole — like sliding the entire layout left, right, or center.”

Learn more here ➜MDN Docs 📘