Skip to main content

justify-content Property in CSS Grid Layouts

justify-content specifies how browsers should position a grid container's columns along its row axis.

note
  • A row axis is sometimes called an inline axis.
  • The justify-content property works only if the total column widths are less than the grid container's width. In other words, you need free space along the container's row axis to justify its columns left or right.

The justify-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 justify-content: start in CSS Grid?

start positions the grid container's columns with its row-start edge.

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

Here's an example:

section {
display: grid;
justify-content: start;
grid-template-columns: repeat(4, 40px);
background-color: orange;
margin: 10px;
}

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

Try it on StackBlitz

The snippet above used the start value to position the <section>'s columns to the grid container's row-start edge.

What Is justify-content: center in CSS Grid?

center positions the grid container's columns to the center of the grid's row axis.

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

Here's an example:

section {
display: grid;
justify-content: center;
grid-template-columns: repeat(4, 40px);
background-color: orange;
margin: 10px;
}

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

Try it on StackBlitz

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

What Is justify-content: end in CSS Grid?

end positions a grid container's columns with its row-end edge.

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

Here's an example:

section {
display: grid;
justify-content: end;
grid-template-columns: repeat(4, 40px);
background-color: orange;
margin: 10px;
}

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

Try it on StackBlitz

The snippet above used the end value to position the <section>'s columns to the grid container's row-end edge.

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

space-between does the following:

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

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

Here's an example:

section {
display: grid;
justify-content: space-between;
grid-template-columns: repeat(4, 40px);
background-color: orange;
margin: 10px;
}

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

Try it on StackBlitz

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

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

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

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

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

Here's an example:

section {
display: grid;
justify-content: space-around;
grid-template-columns: repeat(4, 40px);
background-color: orange;
margin: 10px;
}

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

Try it on StackBlitz

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

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

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

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

Here's an example:

section {
display: grid;
justify-content: space-evenly;
grid-template-columns: repeat(4, 40px);
background-color: orange;
margin: 10px;
}

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

Try it on StackBlitz

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

Buy your CSS Flexbox Explained Visually book on Amazon

Overview

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

Find all your favorite books at booksamillion.com.