CSS

🎯 place-items — The Shorthand for Perfect Grid Alignment

🌐 What is place-items?

place-items is a convenient shorthand property in CSS Grid (and Flexbox) used to set both align-items (vertical alignment) andjustify-items (horizontal alignment) in one line. It helps you quickly center, stretch, or position grid items inside their grid cells.

>>“place-items = align-items + justify-items. One property, full control.”

📌 Syntax

place-items Syntax

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

If you provide only **one value**, it applies to both vertical and horizontal alignment.

🎯 Available Values

Value	Meaning
start	Aligns items to the start (top/left)
center	Centers items in both directions
end	Aligns items to the end (bottom/right)
stretch	Stretches items to fill the cell (default)

🧪 Basic Example

Center All Grid Items

.container {
  display: grid;
  place-items: center;
}

All grid items are perfectly centered both vertically and horizontally.

📐 Visual Example

🧱 Using Two Values

You can provide separate values for vertical and horizontal alignment:

Two-Value Syntax

/* place-items: align-items justify-items */

Example

.container {
  place-items: start center;
  /* vertically aligned to start, horizontally centered */
}

⚡ Equivalent Longhand

Equivalent Properties

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

🧩 Real-World Use Cases

Centering icons inside grid-based buttons
Positioning text or badges inside cards
Creating perfectly centered modal content
Aligning dashboard widgets cleanly
Aligning grid-based UI components symmetrically

📱 Responsive Tips

You can easily adjust item alignment across breakpoints:

Responsive place-items

.container {
  place-items: start;
}

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

🧠 place-items vs place-content

Property	Aligns What?
place-items	Items inside each cell
place-content	The entire grid inside the container

Note

💡 Key difference:
place-items aligns items
place-content aligns the whole grid.

⚠️ Common Mistakes

Using place-items expecting rows/columns to move (that’s place-content)
Forgetting that stretch is the default behavior
Applying place-items to grid items instead of container

🔥 Summary

place-items is a powerful and elegant shorthand that controls both vertical and horizontal alignment of grid items inside their individual cells. It simplifies code, improves readability, and helps create visually balanced layouts with minimal effort.

>>“place-items is the simplest way to bring harmony inside every grid cell.”

Explore more →MDN Docs 📘