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

In many layouts, stretch acts like a default value, so you may not notice a change until you switch to a spacing value like space-between.

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).

When you set flex-flow, you can control direction and wrapping together, and align-content still only kicks in once your flex-items wrap into more than one line.

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.

If you ever mix up the two, remember that the align-items property targets item-level alignment, while align-content targets line-level spacing.

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.

If a card row looks fine until you resize the browser, check constraints like max-width and max-height, since they change how much extra space exists in the viewport.

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.

You can also combine layout spacing with visual styling like background-color and box-shadow to make the container feel like a distinct panel without changing how lines are distributed.

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.

In CSS grid, your grid items sit inside cells, and you might place a specific item with grid-column or shape the rows with grid-template-rows before you fine-tune track positioning with align-content.

Each cell acts like a grid-area, which makes it easier to talk about “where” an item lives separately from “how” the tracks are spaced.

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 good 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.

If one tag needs to sit differently from the rest, the align-self property overrides the container’s cross-axis rules for that single item.

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.

Inside a cell, justify-items sets the default inline-axis alignment for all items, and justify-self lets one item override that default without touching track spacing.

For grid, place-self acts as a compact override for a single item’s alignment, similar to how place-items sets defaults at the container level.

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.

If you’re trying to align text rather than items, text-align controls horizontal alignment of text in a block, and vertical-align usually applies to inline or table-cell content instead of flex or grid alignment.

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

Sizing choices like box-sizing can change how padding and borders affect element dimensions, which can make alignment issues look like spacing issues even when the layout logic is correct.

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.

As a simple debugging function, temporarily add a border and tight constraints to see the actual content box, then remove them once the issue is clear.

If you need a quick fallback while testing, you can briefly switch a layout back to block flow to confirm that your spacing makes sense before re-enabling flex or grid.

On older UI patterns, table-layout can change how cells size, so alignment problems may show up differently than they do in flexbox or grid.

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.