🎯 place-content — Shorthand for Aligning the Entire Grid

🌐 What is place-content?

place-content is a shorthand property in CSS Grid that sets bothalign-content (vertical alignment of the entire grid) andjustify-content (horizontal alignment of the entire grid) in one convenient declaration. It aligns the whole grid block when there is extra space inside the container.

>>“place-content = align-content + justify-content — one property to position the whole grid.”

📌 Syntax

Basic Syntax

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

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

🎯 Available Values

ValueDescription
startPack grid at the top/left
centerCenter vertically and/or horizontally
endPack grid at bottom/right
space-betweenDistribute free space between tracks
space-aroundEqual spacing around tracks
space-evenlyEven spacing between tracks and edges
stretchStretches grid to fill container (default)

Note

⚡ place-content only works when the grid is smaller than the container in both width and height.

🧪 Basic Example

Center Entire Grid

.container {
  display: grid;
  height: 500px;
  width: 500px;
  grid-template-rows: repeat(2, 100px);
  grid-template-columns: repeat(2, 100px);
  place-content: center;
}

This will center the grid vertically and horizontally inside a 500×500 container.

📐 Visual Example

Media content

🧱 Using Two Values

You can control vertical and horizontal alignment separately:

Separate Vertical + Horizontal Alignment

/* place-content: align-content justify-content */ */

.container {
  place-content: start center;
  /* vertically → start, horizontally → center */
}

⚡ Equivalent Longhand

Longhand Equivalent

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

🧠 place-content vs place-items

PropertyAligns What?
place-itemsItems inside individual grid cells
place-contentThe entire grid block inside the container

Note

📌 Easy Reminder:place-items = internal cell alignmentplace-content = whole grid alignment

🧩 Real-World Use Cases

  • Centering a small grid inside a large page section
  • Aligning product cards in a container with extra space
  • Creating evenly spaced dashboard rows/columns
  • Positioning content blocks in hero or footer layouts

📱 Responsive Example

Responsive place-content

.grid {
  place-content: start;
}

@media (min-width: 900px) {
  .grid {
    place-content: space-evenly;
  }
}

On small screens → content sticks to the top.
On large screens → content is evenly spaced vertically and horizontally.

⚠️ Common Mistakes

  • Trying to use place-content when the grid spans full width/height
  • Expecting place-content to move individual items (use place-items instead)
  • Applying place-content to a grid item instead of the grid container

Note

💡 If place-content “does nothing,” it's usually because the grid is already fully stretched.

🔥 Summary

place-content is a powerful shorthand that positions the entire grid block inside its container — both vertically and horizontally. It simplifies your CSS, improves readability, and helps build balanced visual layouts.

>>“place-content gives your entire grid a home inside the container — centered, spaced, or stretched.”

Learn more:MDN Docs 📘