🎯 place-self — Shorthand for Aligning Individual Grid Items

🌐 What is place-self?

place-self is a CSS Grid (and Flexbox) item-level shorthand property that sets bothalign-self (vertical alignment) andjustify-self (horizontal alignment) for a single grid item — all in one line.

>>“place-self = align-self + justify-self — the fastest way to align a single grid item.”

📌 Why use place-self?

  • Align one grid item differently from others
  • Write cleaner, shorter CSS
  • Control vertical + horizontal alignment together
  • Override container-level alignment rules easily

🎯 Syntax

place-self Syntax

place-self: <align-self> <justify-self>;

If you provide only **one value**, it applies to both align-self AND justify-self.

🎯 Available Values

ValueEffect
startAligns item to top/left
centerCenters item vertically/horizontally
endAligns item to bottom/right
stretchStretches item to fill available space

🧪 Basic Example — Perfect Centering

Center a Single Grid Item

.container {
  display: grid;
  place-items: start; /* default for all items */
}

.item2 {
  place-self: center;
  /* Same as: align-self: center; justify-self: center; */
}

Only .item2 becomes fully centered in its cell.

📐 Visual Example

Media content

🧱 Two-Value Example

Different Vertical & Horizontal Alignment

/* place-self: align-self justify-self */ */

.item {
  place-self: start end; 
  /* vertical → start (top), horizontal → end (right) */
}

⚡ Equivalent Longhand

Longhand Equivalent

place-self: center;
/* same as */
align-self: center;
justify-self: center;

🧠 place-self vs place-items

PropertyAligns What?
place-selfOne grid item
place-itemsAll grid items

Note

💡 Use place-self when *one* item needs unique alignment. Use place-items for global alignment.

🧩 Practical Use Cases

  • Centering a specific icon inside a grid card
  • Aligning a CTA button to bottom-right inside a layout
  • Positioning labels or badges precisely
  • Overriding the uniform alignment of other items

🧪 Example: Bottom-Right Badge Placement

Precise Badge Alignment

.product {
  display: grid;
}

.badge {
  place-self: end end; /* bottom-right */
}

📱 Responsive Example

Responsive place-self

.hero-text {
  place-self: center; /* centered on small screens */
}

@media (min-width: 768px) {
  .hero-text {
    place-self: start center; /* top & centered on bigger screens */
  }
}

Fully centered on mobile → Top-centered on larger screens.

⚠️ Common Mistakes

  • Using place-self on non-grid children (won’t work)
  • Expecting horizontal alignment to change with align-self (must use justify-self or place-self)
  • Forgetting the difference between items and content alignment
  • Stretch issues when item has fixed width/height

Note

🧠 Quick Alignment Map:
• align-self → vertical
• justify-self → horizontal
• place-self → both (shorthand)

🔥 Summary

place-self is the simplest way to precisely position a single grid item both vertically and horizontally. It replaces two separate properties, making your CSS cleaner and faster to write.

>>“With place-self, aligning one item becomes effortless — just one line, perfect control.”

Learn more:MDN Docs 📘