🎛️ justify-items — Horizontal Alignment in CSS Grid

🌐 What is justify-items?

justify-items is a CSS Grid property that controls thehorizontal alignment of grid items *within their grid cells*. It applies to **all grid items at once**, unless overridden by justify-self on an individual item.

>>“justify-items tells every grid item: align yourself this way horizontally.”

📌 Where does justify-items apply?

It applies **only to grid containers** (i.e., elements with display: grid or inline-grid). It affects horizontal alignment **inside each cell**, not the entire grid.

🎯 Available Values

ValueDescription
startAligns items to the left of their grid cell
centerCenters items horizontally
endAligns items to the right
stretchStretches items to fill the full cell width (default)

🧪 Basic Example

justify-items: center

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}

All grid items inside each cell will be centered horizontally.

📐 Visual Example

Media content

🧱 Example With All Values

justify-items Variations

.start   { justify-items: start; }
.center  { justify-items: center; }
.end     { justify-items: end; }
.stretch { justify-items: stretch; }

🧠 justify-items vs justify-content

PropertyAligns What?
justify-itemsItems *inside each* grid cell (horizontal)
justify-contentThe **entire grid** inside the container (horizontal)

Note

⚡ Tip:
justify-items = item alignment
justify-content = grid alignment

📦 Override With justify-self

If you want to align just one grid item, use justify-self.

Overriding justify-items

.container {
  display: grid;
  justify-items: center; /* default for all items */
}

.item1 {
  justify-self: end; /* override just this item */
}

🧩 Real-World Use Cases

  • Centering icons inside grid-based buttons
  • Aligning text inside grid cells
  • Horizontal alignment consistency in dashboards
  • Perfectly centering cards or images

📱 Responsive Notes

justify-items works consistently across all breakpoints. You can override it using media queries if needed.

Responsive justify-items

.container {
  justify-items: start;
}

@media (min-width: 768px) {
  .container {
    justify-items: center;
  }
}

⚠️ Common Mistakes

  • Using justify-items thinking it aligns the entire grid (that’s justify-content)
  • Expecting it to vertically align items (use align-items instead)
  • Applying justify-items on grid items instead of the container

Note

🧠 Remember: justify-items is horizontal; align-items is vertical.

🔥 Summary

justify-items controls how grid items are horizontally positioned inside their grid cells. Whether it's left, center, right, or stretched, this property gives you fine control over internal alignment, ensuring clean and consistent UI layouts.

>>“Perfect alignment begins at the cell level — that’s the power of justify-items.”

Learn more ➜MDN Docs 📘