Skip to main content

align-content Property in CSS Grid Layouts

align-content specifies how browsers should align a grid container's rows along the container's column axis.

note
  • A column axis is sometimes called a block axis.
  • The align-content property works only if the total row heights are less than the grid container's height. In other words, you need free space along the container's column axis to align its rows up or down.

The align-content property accepts the following values:

  • start
  • center
  • end
  • stretch
  • space-between
  • space-around
  • space-evenly
Buy your CSS Flexbox Explained Visually book on Amazon

What Is align-content: start in CSS Grid?

start aligns a grid container's rows with the column-start edge of the grid's column axis.

Illustration of align-content's start value in CSS Grid

Here's an example:

section {
display: grid;
align-content: start;
grid-template-columns: 1fr 1fr;
background-color: orange;
margin: 10px;
height: 300px;
}

div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 10px;
border-radius: 5px;
}

Try it on StackBlitz

The snippet above used the start value to align the <section>'s rows to the grid container's column-start edge.

What Is align-content: center in CSS Grid?

center aligns a grid container's rows to the center of the grid's column axis.

Illustration of align-content&#39;s center value in CSS Grid

Here's an example:

section {
display: grid;
align-content: center;
grid-template-columns: 1fr 1fr;
background-color: orange;
margin: 10px;
height: 300px;
}

div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 10px;
border-radius: 5px;
}

Try it on StackBlitz

The snippet above used the center value to align the <section>'s rows to the center of the grid container.

What Is align-content: end in CSS Grid?

end aligns a grid container's rows with the column-end edge of the grid's column axis.

Illustration of align-content&#39;s end value in CSS Grid

Here's an example:

section {
display: grid;
align-content: end;
grid-template-columns: 1fr 1fr;
background-color: orange;
margin: 10px;
height: 300px;
}

div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 10px;
border-radius: 5px;
}

Try it on StackBlitz

The snippet above used the end value to align the <section>'s rows to the grid container's column-end edge.

What Is align-content: space-between in CSS Grid?

space-between does the following:

  • It aligns a grid container's first row with its column-start edge.
  • It aligns the container's last row with the column-end edge.
  • It creates even spacing between each pair of rows between the first and last row.

Illustration of align-content&#39;s space-between value in CSS Grid

Here's an example:

section {
display: grid;
align-content: space-between;
grid-template-columns: 1fr 1fr;
background-color: orange;
margin: 10px;
height: 300px;
}

div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 10px;
border-radius: 5px;
}

Try it on StackBlitz

The snippet above used the space-between value to create even spacing between each pair of rows between the first and last grid row.

What Is align-content: space-around in CSS Grid?

space-around assigns equal spacing to each side of a grid container's rows.

Therefore, the space before the first row and after the last one is half the width of the space between each pair of rows.

Illustration of align-content&#39;s space-around value in CSS Grid

Here's an example:

section {
display: grid;
align-content: space-around;
grid-template-columns: 1fr 1fr;
background-color: orange;
margin: 10px;
height: 300px;
}

div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 10px;
border-radius: 5px;
}

Try it on StackBlitz

The snippet above used the space-around value to assign equal spacing to each side of the grid container's rows.

What Is align-content: space-evenly in CSS Grid?

space-evenly assigns even spacing to both ends of a grid container and between its rows.

Illustration of align-content&#39;s space-evenly value in CSS Grid

Here's an example:

section {
display: grid;
align-content: space-evenly;
grid-template-columns: 1fr 1fr;
background-color: orange;
margin: 10px;
height: 300px;
}

div {
border: 1px solid black;
background-color: purple;
color: white;
padding: 10px;
border-radius: 5px;
}

Try it on StackBlitz

We used the space-evenly value to assign even spacing to both ends of the grid container and between its rows.

Buy your CSS Flexbox Explained Visually book on Amazon

Overview

This article discussed what a CSS align-content property is. We also discussed its values.