🎚 align-self — Vertical Alignment for Individual Grid Items

🌐 What is align-self?

align-self is a CSS Grid (and Flexbox) item-level property that controls thevertical alignment of a single grid item inside its own grid cell. It overrides the grid container’s global align-items setting, allowing unique alignment for specific elements.

>>“align-self gives *individual* items vertical freedom inside the grid cell.”

📌 Where does align-self apply?

  • Works ONLY on grid items (direct children of a grid container)
  • Controls vertical alignment inside the cell
  • Overrides align-items for the selected item

🎯 Available Values

ValueMeaning
startAligns item to the top of its grid cell
centerCenters item vertically
endAligns item to the bottom
stretchStretches item to fill the full cell height (default)

🧪 Basic Example

Center a Single Item Vertically

.container {
  display: grid;
  grid-template-rows: repeat(3, 120px);
  align-items: start; /* default for all items */
}

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

Only .item2 will be vertically centered—others align to the top.

📐 Visual Example

Media content

🧱 Demo of All Values

align-self Variants

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

🧠 align-self vs align-items

PropertyWhat It Affects?
align-itemsVertical alignment of all grid items
align-selfVertical alignment of one specific item

Note

💡 Use align-self when ONE item needs unique behavior.

🧩 Practical Use Cases

  • Vertically centering a single card inside a grid
  • Aligning a specific image or logo within a layout
  • Creating uneven but visually appealing UI compositions
  • Overriding alignment inside responsive sections

🧪 Example: Aligning a Badge or Icon

Bottom-Aligned Badge

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

.badge {
  align-self: end; /* badge sticks to the bottom area */
}

Perfect for price labels, badges, or footer icons.

📱 Responsive Example

Responsive align-self

.cta {
  align-self: start;
}

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

On small screens → CTA sticks to the top
On large screens → CTA shifts to vertical center

⚠️ Common Mistakes

  • Using align-self on non-grid children (does nothing)
  • Confusing vertical alignment (align-self) with horizontal (justify-self)
  • Expecting align-self to override fixed row heights
  • Forgetting that stretch is default, so items may expand unexpectedly

Note

🧠 Quick Reminder:
• align-self = vertical
• justify-self = horizontal

🔥 Summary

align-self offers fine-grained control over the vertical alignment of single grid items, helping you create polished and flexible designs. It's the perfect tool when you want one item to behave differently from the rest.

>>“Great UI is often about the small adjustments — align-self is one of those powerful tweaks.”

Learn more:MDN Docs 📘