CSS Grid Alignment

CSS Grid Alignment

CSS Grid provides alignment properties for positioning grid items within their grid areas and positioning the Grid tracks within the grid container.

Properties such as justify-items and align-items control the items, while justify-content and align-content control the Grid tracks when extra space exists in the container.

Two Types of Grid Alignment

Grid alignment properties can be divided into two main groups: item alignment and content alignment.

Understanding what is being aligned is important because changing an item alignment property does not have the same effect as changing a content alignment property.

The justify-items Property

The justify-items property controls the inline-axis alignment of grid items within their grid areas.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  justify-items: center;
}

In a typical left-to-right horizontal writing mode, the inline axis runs horizontally, so justify-items: center centers each item horizontally within its grid area.

Common values include start, end, center, and stretch.

The align-items Property

The align-items property controls the block-axis alignment of grid items within their grid areas.

.grid-container {
  display: grid;
  grid-template-rows: repeat(2, 120px);
  align-items: center;
}

In a typical horizontal writing mode, the block axis runs vertically, so this centers the items vertically within their grid areas.

Common values include start, end, center, and stretch.

The place-items Property

The place-items shorthand combines align-items and justify-items.

.grid-container {
  display: grid;
  place-items: center;
}

With one value, the same alignment is applied to both axes.

Two values can specify different alignment for the block and inline axes.

.grid-container {
  place-items: start center;
}

The first value applies to align-items, and the second applies to justify-items.

The justify-self Property

The justify-self property overrides the inline-axis alignment for an individual grid item.

.grid-container {
  justify-items: start;
}
.special {
  justify-self: end;
}

Most items align at the start of their grid areas, while the item with the special class aligns at the end.

The align-self Property

The align-self property overrides the block-axis alignment for an individual grid item.

.grid-container {
  align-items: start;
}
.special {
  align-self: end;
}

The special item aligns at the block-end side of its grid area while the other items remain aligned at the start.

The place-self Property

The place-self shorthand combines align-self and justify-self for an individual grid item.

.special {
  place-self: center;
}

This centers the item on both axes within its grid area.

With two values, the first applies to align-self and the second applies to justify-self.

.special {
  place-self: end center;
}

The justify-content Property

The justify-content property aligns the Grid tracks along the inline axis when the grid is smaller than the available space in the grid container.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  justify-content: center;
}

If the container is wider than the three 100-pixel tracks, the entire set of tracks is centered along the inline axis.

Common values include start, end, center, space-between, space-around, and space-evenly.

The align-content Property

The align-content property aligns the Grid tracks along the block axis when the grid is smaller than the available space in the grid container.

.grid-container {
  display: grid;
  height: 400px;
  grid-template-rows: repeat(2, 100px);
  align-content: center;
}

The two 100-pixel rows occupy less than the 400-pixel container height, so the rows can be centered within the extra vertical space.

As with justify-content, distributed values such as space-between, space-around, and space-evenly can distribute extra space between the tracks.

The place-content Property

The place-content shorthand combines align-content and justify-content.

.grid-container {
  place-content: center;
}

This centers the Grid tracks along both axes when the grid is smaller than its container in those directions.

Two values can be used when different alignment is needed for each axis.

.grid-container {
  place-content: center space-between;
}

The first value controls align-content, while the second controls justify-content.

Grid Alignment Axes

Grid alignment uses logical inline and block axes rather than permanently referring to horizontal and vertical directions.

In common left-to-right horizontal writing, the inline axis is horizontal and the block axis is vertical. Different writing modes can change those physical directions.

CSS Grid Alignment Example

The following example compares item alignment with content alignment.

.item-alignment {
  justify-items: center;
  align-items: center;
}
.content-alignment {
  justify-content: center;
  align-content: center;
}

In the first grid, each item is centered inside its own grid area. In the second grid, the set of Grid tracks is centered within a larger container.

Open the example in the editor and change the alignment values to start, end, center, or other supported values to compare the results.