How To Use CSS Grid Properties to Justify and Align Content and Items

Introduction

With CSS grid layout, the grid itself within its container as well as grid items can be positioned with the following 6 properties: justify-items, align-items, justify-content, align-content, justify-self, and align-self. These properties are part of the CSS box alignment module and they define a standard way to position elements with either flexbox or CSS grid.

Most of the alignment properties are applied on the grid container, but some are for grid items, for when you want to specify values that apply only for specific grid items.

In this article, you will explore each of the CSS grid properties.

Prerequisites

If you would like to follow along with this article, you will need:

• An understanding of CSS property and values.
• A code editor.
• A modern web browser that supports CSS grid.

Step 1 — Using Properties on the Grid Container

Consider the markup for a container <div> element with six nested <div> elements:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

With the following CSS rules:

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: auto;

  box-sizing: border-box;
  width: 400px;
  height: 200px;
  margin-left: auto;
  margin-right: auto;

  background: rgba(114, 186, 94, 0.05);
  border: 2px dashed rgba(114, 186, 94, 0.35);
}

.item {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  background: rgba(255, 213, 70, 0.4);
  border: 2px dashed rgba(236, 198, 48, 0.5);
}

This code will produce a grid layout with three columns that are 100px wide. Each grid item will have a width of 50px and a height of 50px:

At this point, the justification and alignment have not been set. By default, the grid items will start at the top-left of the container.

justify-items

justify-items is used to justify the grid items along the row axis. The possible values are start, end, center, and stretch.

Here is an example of center:

.container {
  /* ... */
  justify-items: center;
}

The grid items are aligned horizontally to the middle of the columns.

Here is an example of end:

.container {
  /* ... */
  justify-items: end;
}

The grid items are aligned horizontally to the far edge of the column.

align-items

align-items is used to align the grid items along the column axis.

Here is an example of center:

.container {
  /* ... */
  align-items: center;
}

The grid items are aligned vertically to the middle of the columns.

Here is an example of end:

.container {
  /* ... */
  align-items: end;
}

The grid items are aligned vertically to the bottom of the columns.

justify-content

When the entire grid is smaller than the space for the grid container, use justify-content to justify the grid along the row axis. You can use the following values: start, end, center, stretch, space-around, space-between, or space-evenly.

Here is an example of end:

.container {
  /* ... */
  justify-content: end;
}

The grid content is aligned horizontally to the far edge of the container element.

.container {
  /* ... */
  justify-content: space-evenly;
}

The grid content is spaced evenly horizontally within the container element.

align-content

align-content is used to align the grid content along the column axis.

Here is an example of end:

.container {
  /* ... */
  align-content: end;
}

Here is an example of space-evenly:

.container {
  /* ... */
  align-content: space-evenly;
}

justify-items, align-items, justify-content, and align-content are four properties that apply to the entire grid.

Step 2 — Using Properties on the Grid Items

justify-self and align-self are analogous to the equivalent properties available on the container (justify-items and align-items), but they apply to items directly to position them differently than the rest of the grid items.

justify-self

justify-self is used to align a grid item along the row axis.

Here is an example of end:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item" style="justify-self: end;">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

The third item is aligned horizontally to the far edge of the column.

align-self

align-self is used to align a grid item along the column axis.

Here is an example of end:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item" style="align-self: end;">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

The third item is aligned vertically to the bottom of the column.

justify-self and align-self are two properties that apply directly to grid items.

Step 3 — Using Multiple Properties

Using a combination of row axis and column axis CSS grid properties may be necessary to create the grid you desire.

Here is an example that uses a combination of justify-content: space-evenly, justify-items: center, align-content: space-evenly, and align-items: center:

.container {
  /* ... */
  justify-content: space-evenly;
  justify-items: center;
  align-content: space-evenly;
  align-items: center;
}

This code will produce six grid items that are spaced evenly and centered in the containing element.

Use other combinations to achieve your desired grid.

Conclusion

In this article, you explored each of the CSS grid properties.

As of 2020, 95% of browsers have some level of support for CSS grid. For details, reference Can I Use css-grid. Ensure that your target audience can utilize this feature before incorporating it into your web applications.

If you’d like to learn more about CSS, check out our CSS topic page for exercises and programming projects.