🎯 justify-self — Horizontal Alignment for Individual Grid Items

🌐 What is justify-self?

justify-self is a CSS Grid item-level property that controls thehorizontal alignment of a specific grid item inside its own grid cell. It overrides the container-level justify-items property, giving you precise control over individual elements.

>>“justify-self aligns a single grid item horizontally — left, center, right, or stretched.”

📌 Where does justify-self apply?

✔ Works only on **grid items** (children of a grid container)
✔ Applies to **horizontal alignment** inside the grid cell
✔ Overrides justify-items when needed

🎯 Available Values

ValueMeaning
startAligns the item to the left of its cell
centerCenters the item horizontally
endAligns the item to the right of its cell
stretchStretches item to fill full cell width (default)

🧪 Basic Example

Center a Single Item

.container {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  justify-items: start; /* default for all */
}

.item2 {
  justify-self: center; /* override for this item */
}

Only .item2 will be centered, the rest align to the left.

📐 Visual Guide

Media content

🧱 Using All Values

justify-self Variants

.item1 { justify-self: start; }
.item2 { justify-self: center; }
.item3 { justify-self: end; }
.item4 { justify-self: stretch; }

🧠 justify-self vs justify-items

PropertyWhat It Controls
justify-itemsHorizontal alignment of all items in the grid
justify-selfHorizontal alignment of one item

Note

💡 Use justify-self when you want one element to behave differently.

🧩 Practical Use Cases

  • Centering an icon inside a button in a grid layout
  • Aligning specific cards differently in a card grid
  • Right-aligning a single badge inside its grid cell
  • Overriding global justify-items rules

🧪 Example: Tooltip or Badge Alignment

Right-Aligned Badge

.product {
  display: grid;
  grid-template-columns: 1fr auto;
}

.badge {
  justify-self: end;
}

The badge will stick to the right side of its cell.

📱 Responsive Example

Responsive justify-self

.cta {
  justify-self: center;
}

@media (min-width: 768px) {
  .cta {
    justify-self: end;
  }
}

Small screens → centered CTA
Large screens → right-aligned CTA

⚠️ Common Mistakes

  • Using justify-self on non-grid items (won’t work)
  • Expecting justify-self to align content vertically (use align-self instead)
  • Not realizing stretch is the default value

Note

🧠 Remember:
• justify-self = horizontal (left–right)
• align-self = vertical (top–bottom)

🔥 Summary

justify-self gives you fine-grained control over the horizontal alignment of individual grid items. It is perfect for exceptions when you want one item to align differently from the others.

>>“One line of justify-self can dramatically improve grid precision and visual balance.”

Learn more here ➜MDN Docs 📘