🎚️ align-content — Vertical Distribution of the Entire Grid

🌐 What is align-content?

align-content is a CSS Grid property used to control thevertical alignment of the entire grid (all rows together) inside the grid container. It affects the **grid as a whole**, not individual grid items.

>>“align-content moves the whole grid block vertically — not the items inside their cells.”

📌 When Does align-content Work?

  • The total grid height must be less than the container height
  • There must be extra vertical space available
  • Your grid rows should not already stretch to 100% height (e.g., using 1fr everywhere)

Note

💡 If your rows already fill the container, align-content will appear to do nothing.

🎯 Available Values

ValueDescription
startMoves the entire grid to the top
centerCenters the whole grid vertically
endMoves the grid to the bottom
space-betweenDistributes extra vertical space between rows
space-aroundEqual spacing above and below each row
space-evenlyEqual spacing between all rows and edges

🧪 Basic Example

Center the Entire Grid Vertically

.container {
  display: grid;
  height: 400px; /* container taller than grid */
  grid-template-rows: 100px 100px;
  align-content: center;
}

The two 100px rows (total 200px) will be centered within the 400px container.

📐 Visual Representation

Media content

🧱 Example of Each Value

align-content Variants

.start        { align-content: start; }
.center       { align-content: center; }
.end          { align-content: end; }
.spaceBetween { align-content: space-between; }
.spaceAround  { align-content: space-around; }
.spaceEvenly  { align-content: space-evenly; }

🧠 align-content vs align-items

PropertyWhat It Aligns
align-itemsItems inside each individual cell (vertical)
align-contentThe entire grid block (vertical)

Note

🧠 Shortcut reminder: • align-items = alignment *inside cells* • align-content = alignment of *all rows together*

🧩 Real-World Use Cases

  • Centering a fixed-height grid inside a tall container
  • Distributing rows evenly in a dashboard layout
  • Creating space-between effects vertically
  • Aligning promotional banners or card sections within a layout

📱 Responsive Example

Responsive align-content

.grid {
  height: 500px;
  grid-template-rows: repeat(3, 120px);
  align-content: start;
}

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

On small screens, rows stick to the top.
On large screens, rows spread out for a cleaner layout.

⚠️ Common Mistakes

  • Using align-content when grid rows fill all available height
  • Expecting it to align cell content (use align-items instead)
  • Applying align-content on grid items instead of the container

Note

💡 If align-content “does nothing,” check your row heights!

🔥 Summary

align-content is a powerful property that vertically positions the entire grid structure when extra space is available. It enables centered layouts, distributed rows, and visually balanced UI designs.

>>“align-content brings vertical harmony to your entire grid — not just the items.”

Learn more ➜MDN Docs 📘