align-content

align-content distributes free space around grid rows, wrapped flex lines, or content in a block container. In Grid it acts on the block axis; in Flexbox it acts on the cross axis. With the usual horizontal writing mode and a flex row, that axis is vertical.

It aligns the group of rows or lines. To align a child inside its grid area, use align-items.

Smallest working example

The rows occupy 80px, while the container is 180px tall. That leaves space for center to distribute above and below them.

<div class="layout">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 40px;
  height: 180px;
  align-content: center;
  gap: 8px;
}
/* Optional presentation */
.layout {
  border: 1px solid #64748b;
}
.layout > div {
  background: #dbeafe;
  padding: 8px;
}

The two rows stay together in the middle. Change center to start, end, or space-between and compare their positions.

Values and defaults

The initial value is normal; the property is not inherited. start, center, and end place the group. space-between leaves no outer spacing; space-around gives outer spacing half the size of the spacing between rows; space-evenly makes all those spaces equal. stretch can enlarge tracks sized with auto. safe center falls back toward the start if centering would make content inaccessible.

In block layout, distributed values such as space-between cannot create gaps between children: the content is treated as one alignment subject.

A practical use

A fixed-height panel with a few short rows can center its contents without changing the height of every row. Keep its height flexible on small screens, or use min-height, so longer content still fits.

.panel { min-height: 16rem; align-content: center; }

Why it may do nothing

A flex container with flex-wrap: nowrap is single-line, so this property has no effect. Grid tracks sized with 1fr may consume all available height, leaving no free space to distribute. Try fixed or content-sized rows and inspect the container’s height.

Learn flex-wrap before aligning multiple flex lines, and use gap for a minimum space between rows.

A second working case

<div class="panel">
  <span>HTML</span><span>CSS</span><span>Forms</span><span>Layout</span>
</div>

.panel {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  gap: 0.5rem;
  height: 12rem;
  max-width: 22rem;
  border: 1px solid #64748b;
}
.panel span {
  flex: 0 0 42%;
  padding: 0.5rem;
  background: #dbeafe;
}

The fixed-height panel has two flex lines. Free cross-axis space separates the lines. Change flex-wrap to nowrap: the container becomes single-line and align-content no longer distributes them.

Sources and browser support

MDN: align-content describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.