CSS align-content property: Syntax, Usage, and Examples

The align-content property controls how lines of content are spaced along the cross axis inside a Flexbox or Grid container. It only has a visible effect when the container has extra space in that direction and there is more than one line of items.

How to Use the align-content property

align-content is a container property. You set it on a flex container (usually with wrapping) or a grid container.

Basic syntax

.container {
align-content: center;
}

Common values you’ll use

These are the values you’ll see most in day-to-day CSS:

• stretch (often the default behavior in many layouts)
• flex-start
• flex-end
• center
• space-between
• space-around
• space-evenly

align-content in Flexbox

Flexbox needs multiple lines before align-content does anything. That usually means flex-wrap: wrap.

.gallery {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}

If your items are all on one line, align-content won’t change anything. In that case, you probably want align-items (for cross-axis alignment of items) or justify-content (for main-axis distribution).

align-content in Grid

Grid uses align-content to position the entire grid tracks inside the container when the container is taller than the grid content.

.board {
display: grid;
grid-template-columns:repeat(3,180px);
grid-auto-rows:80px;
align-content: center;
}

A quick mental model

• align-items: aligns items inside a line
• align-content: aligns the lines themselves (or grid tracks)

If you picture a wrapped flex layout as “rows,” then align-content controls spacing between the rows.

When to Use the align-content property

The align-content property shines when you want control over “groups of rows” or “tracks,” not individual items.

1) Wrapped flex layouts that need nicer spacing

Tag clouds, card grids, and image galleries often wrap into multiple rows. align-content lets you push those rows to the top, center them, or spread them out vertically.

2) A fixed-height container with multiple lines of items

A common UI pattern is a panel with a fixed height (or min-height) where wrapped content should sit in a specific spot. align-content: center can keep the rows centered without extra wrappers.

3) Grid layouts where the grid is smaller than the container

Grid content does not always fill the container. align-content can center the whole grid, stick it to the bottom, or distribute tracks vertically.

4) “Breathing room” for dashboards and empty states

A dashboard section with just a few cards can look awkward when everything hugs the top. align-content helps distribute space, so the layout feels balanced.

Examples of the align-content property

Example 1: Flexbox rows spaced out inside a tall container

This shows a wrapped card layout that spreads rows from top to bottom.

<sectionclass="panel"aria-label="Team directory">
<divclass="chip">Amina</div>
<divclass="chip">Diego</div>
<divclass="chip">Sam</div>
<divclass="chip">Priya</div>
<divclass="chip">Kai</div>
<divclass="chip">Noor</div>
<divclass="chip">Marta</div>
<divclass="chip">Jules</div>
</section>

.panel {
display: flex;
flex-wrap: wrap;
gap:12px;

height:260px;
padding:12px;
border:1px solid#ccc;

align-content: space-between;
}

.chip {
padding:10px12px;
border:1px solid#bbb;
border-radius:999px;
}

Why this works:

• Wrapping creates multiple lines.
• The container has extra vertical space (height: 260px).
• align-content: space-between spreads the rows.

Try changing align-content to center to see the whole set of rows cluster in the middle.

Example 2: Flexbox rows centered for a “compact” widget

This is a friendly fit for small panels where you want the wrapped items to sit in the middle.

<divclass="widget"aria-label="Popular topics">
<spanclass="tag">CSS</span>
<spanclass="tag">Flexbox</span>
<spanclass="tag">Grid</span>
<spanclass="tag">SVG</span>
<spanclass="tag">Accessibility</span>
<spanclass="tag">Forms</span>
</div>

.widget {
display: flex;
flex-wrap: wrap;
gap:10px;

height:200px;
padding:14px;
border:1px solid#ddd;

align-content: center;
}

.tag {
padding:6px10px;
border-radius:999px;
border:1px solid#ccc;
}

This centers the rows inside the widget. If the tags sit on just one row, align-content stops mattering and align-items becomes the one you notice.

Example 3: Grid tracks centered inside a taller container

Here the grid itself does not fill the container height. align-content positions the tracks.

<sectionclass="stats"aria-label="Weekly stats">
<divclass="stat">Visitors</div>
<divclass="stat">Signups</div>
<divclass="stat">Sales</div>
<divclass="stat">Churn</div>
<divclass="stat">Support</div>
<divclass="stat">Uptime</div>
</section>

.stats {
display: grid;
grid-template-columns:repeat(3,160px);
grid-auto-rows:70px;
gap:12px;

height:320px;
padding:12px;
border:1px solid#ccc;

align-content: center;
justify-content: center;/* keeps the grid centered horizontally too */
}

.stat {
display: grid;
place-items: center;
border:1px solid#bbb;
border-radius:10px;
}

align-content here centers the rows of tracks in the available vertical space. The items themselves stay inside their grid cells, so you can still use align-items or place-items for cell-level alignment.

Example 4: A “stacked rows” feel with flex-start

Sometimes the goal is boring on purpose. UI often wants rows to stack at the top and leave empty space below.

<divclass="feed"aria-label="Notifications">
<divclass="note">New comment</div>
<divclass="note">Build finished</div>
<divclass="note">Password changed</div>
<divclass="note">Invite accepted</div>
<divclass="note">Billing updated</div>
<divclass="note">New follower</div>
</div>

.feed {
display: flex;
flex-wrap: wrap;
gap:12px;

height:240px;
padding:12px;
border:1px solid#ddd;

align-content: flex-start;
}

.note {
width:140px;
padding:10px;
border:1px solid#ccc;
border-radius:10px;
}

align-content: flex-start keeps the rows packed at the top. It’s great when you want empty space to stay at the bottom, like a “shelf” that fills from top down.

Learn More About the align-content property

align-content vs align-items

This mix-up causes most “why isn’t this working” moments.

• align-items aligns items within a single line (or within each grid row/column depending on context).
• align-content aligns the collection of lines (Flexbox wrapping lines, or Grid tracks).

A quick test helps:

• Remove flex-wrap: wrap on a flex container.
• If your layout becomes a single line, align-content has nothing to work with.

align-content needs extra space

No extra space means nothing to distribute.

For Flexbox, you usually need a fixed height or min-height on the container. For Grid, you need the grid tracks to be smaller than the container’s content box.

.container {
min-height:300px;
align-content: space-evenly;
}

Without a height constraint, the container often collapses to content height, and align-content looks like it “does nothing.”

Cross axis depends on direction

In Flexbox:

• flex-direction: row means the cross axis is vertical.
• flex-direction: column means the cross axis is horizontal.

So align-content can affect horizontal spacing when you use a column direction and wrapping.

.columns {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width:420px;

align-content: space-around;/* distributes columns horizontally */
}

That example feels weird at first, but it’s the same rule. align-content always works along the cross axis.

Helpful related properties

If align-content feels close but not quite right, these are often the missing piece:

• justify-content: distributes items on the main axis
• align-items: aligns items on the cross axis (single-line focus)
• gap: controls spacing between items without changing alignment rules
• Grid shortcuts like place-content (shorthand for align-content + justify-content) and place-items

Common debugging checklist

When align-content is not behaving, walk through these checks:

1. Multiple lines exist

   For Flexbox, confirm flex-wrap: wrap and enough items to wrap.

2. Extra space exists in the cross axis

   Give the container height or min-height, or confirm your grid tracks do not fill the container.

3. You are using the right property for the problem

   If you want items centered inside their row, try align-items: center. If you want rows spaced within a tall container, use align-content.

Summary

The align-content property controls spacing between multiple flex lines or grid tracks along the cross axis. It becomes useful when content wraps or when the grid is smaller than its container. For single-line layouts, align-items usually does the job, and align-content quietly steps aside.