Grid alignment: content

Let's look at the next group of properties that will help us place grid elements in the way we want.

Justify-content

This property is used when the total column width is smaller than the grid container's width. This means that you need free space to justify columns inside the grid container.

You can use the following values:

• start
• end
• center
• stretch

The way these values work is quite self-evident. Let's focus on more interesting ones:

• space-around places items evenly and they have a half-size space on both ends.

.item {
  min-width: 100px;
  background: #77389a;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 15px;
  width: 500px;
  border: 1px dashed #ccc;

  justify-content: space-around;
}

• space-between places items evenly and they don't have a free space on their ends.

.grid-container {
  justify-content: space-between;
}

• space-evenly: items have an equal amount of space around them.

.grid-container {
  justify-content: space-evenly;
}

Align-content

If your grid's total size is less than its grid container's, you can use align-content. It aligns the grid content along the column axis.

It has the same values:

• start
• end
• center
• stretch

The following values will be accompanied by examples to help you understand them better:

• space-around places items evenly and they have a half-size space on both ends.

.item {
  background: #77389a;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 120px);
  grid-template-rows: 80px 80px;
  gap: 15px;
  width: 500px;
  height: 300px;
  border: 1px dashed #ccc;

  align-content: space-around;
}

• space-between places items evenly and they don't have a free space on ends.

.grid-container {
  align-content: space-between;
}

• space-evenly: items have an equal amount of space around them.

.grid-container {
  align-content: space-evenly;
}

Place-content

It is a shorthand for align-content and justify-content properties. The properties are combined in the following order:

Place-items: <align-content> <justify-content>

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

Conclusion

Understanding the properties of justify-content, align-content, and place-content is essential in placing grid elements as desired. On the one hand, justify-content is used when the total column width is smaller than the grid container's width, and it requires free space to justify columns inside the container.

On the other hand, align-content is used when the total size of the grid is less than its container size, and it aligns the grid content along the column axis.

Lastly, place-content is a shorthand for align-content and justify-content.

Let's test the knowledge that you've acquired!