Tutorial

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

Updated on March 16, 2021
Default avatar

By Alligator.io

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.

Deploy your frontend applications from GitHub using DigitalOcean App Platform. Let DigitalOcean focus on scaling your app.

Prerequisites

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

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:

1
2
3
4
5
6

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;
}
1
2
3
4
5
6

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

Here is an example of end:

.container {
  /* ... */
  justify-items: end;
}
1
2
3
4
5
6

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;
}
1
2
3
4
5
6

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

Here is an example of end:

.container {
  /* ... */
  align-items: end;
}
1
2
3
4
5
6

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;
}
1
2
3
4
5
6

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

.container {
  /* ... */
  justify-content: space-evenly;
}
1
2
3
4
5
6

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;
}
1
2
3
4
5
6

Here is an example of space-evenly:

.container {
  /* ... */
  align-content: space-evenly;
}
1
2
3
4
5
6

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>
1
2
3
4
5
6

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>
1
2
3
4
5
6

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;
}
1
2
3
4
5
6

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Alligator.io

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel