In this section, we will learn what the grid justify-content property is and how to use it in CSS.

Click here to run the example of grid justify-content property.

CSS grid justify-content Property Definition and Usage

The grid that we build using CSS resides within a container which, technically, is the element that holds it.

If the size of the grid-container was horizontally (along the row axis) greater than the grid itself, we can decide how we want the grid to be positioned horizontally (along the row axis) in the grid-container using the CSS `justify-content`.

CSS grid justify-content Property Syntax

justify-content: value;

CSS grid justify-content Property Value

Here’s the list of values we can set for this property:

• start: Using this value, the grid will be positioned at the start line of the container (which is normally the left edge) and push any free space to the end edge of the container (usually the right edge).

• end: Using this value, the grid will be positioned at the end line of the container (which is normally the right edge) and push any free space to the start edge of the container (usually the left edge).

• center: using this value, the grid will be positioned at the center of the container and push any free space around them (but not between them).

• stretch: Using this value, the grid will stretch its columns in order to fill any free space (along the row axis) of the container.

• space-between: Using this value, the first and last column (vertical tracks) of the grid will be positioned at the start and end edge of the container and any free space will be pushed between the rest of columns.

• space-around: Using this value, any free space (along the row axis) of the container will be evenly pushed around columns (vertical tracks) except that first and the last columns will take half of the space that is pushed between each column.

• space-evenly: Using this value, any free space of the container will be evenly pushed around columns (vertical tracks).

Example: justify-content space between

See the Pen grid justify-content space between by Omid Dehghan (@enjoytutorials1) on CodePen.

Example: CSS grid justify-content property

See the Pen CSS grid justify-content property by Omid Dehghan (@enjoytutorials1) on CodePen.