CSS Grid Alignment

Here's a rundown of the various alignment properties that you can apply to grid containers and grid items.

Generally, most alignment properties work the same way on grid items as they do on other elements. But there are also some alignment properties that apply specifically to grid and flexbox. Here's an overview.

The `align-items` Property

The align-items property specifies the default align-self value for all the grid items participating in the grid container's formatting context.

<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 10px;
  align-items: center;
  background-color: beige;
}

#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
}
.red {
  background: orangered;
  height: 40%;
}
.green {
  background: yellowgreen;
  height: 60%;
}
.blue {
  background: steelblue;
  height: auto;
}
body {
  margin: 0;
}
</style>

<div id="grid">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

In this example, we apply align-items: center to the grid container, therefore all grid items are aligned to the center of the block axis.

But because this is a default setting, any of the grid items could override this with the align-self property.

The `align-self` Property

The align-self property aligns a box within its containing block along the block/column/cross axis.

<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 10px;
  align-items: center;
  background-color: beige;
}

#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
}
.red {
  background: orangered;
  height: 40%;
  align-self: baseline;
}
.green {
  background: yellowgreen;
  height: 60%;
}
.blue {
  background: steelblue;
  height: auto;
  align-self: stretch;
}
body {
  margin: 0;
}
</style>

<div id="grid">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

Here, the red grid item has a value of baseline, and the blue item has a value of stretch. The blue item's height is auto, so it stretches to take up the full height of its grid area.

However, we haven't set a value for the green item. Therefore it uses the default value, which in this case, is set to center by the align-items on the grid container.

The `justify-items` Property

The justify-items property specifies the default justify-self value for all the grid items participating in the grid container's formatting context.

<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
  justify-items: center;
  background-color: beige;
}

#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
  width: 20%;
}
.red {
  background: orangered;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
}
</style>

<div id="grid">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

The `justify-self` Property

The justify-self property can be used to align an individual grid item along the inline/row/main axis.

<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
  justify-items: center;
  background-color: beige;
}

#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
  width: 20%;
}
.red {
  background: orangered;
  justify-self: end;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
  justify-self: start;
}
</style>

<div id="grid">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

The `justify-content` Property

The justify-content property aligns the grid container's contents as a whole along the main/inline axis.

This can be used for aligning the whole grid within the grid container, in the event that the grid tracks take up less space than their grid container. This can happen if you set the track size with an absolute unit (such as pixels), while the grid container takes up more space than all the tracks combined.

<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-columns: 100px;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
  justify-content: center;
  background-color: beige;
}

#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
}
.red {
  background: orangered;
  width: 20px;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
  width: 40px;
}
</style>

<div id="grid">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

The `align-content` Property

The align-content property is the same as justify-content, except that this property aligns along the cross/block axis.

<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px;
  grid-gap: 10px;
  align-content: center;
  background-color: beige;
  height: 100vh;
}

#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
}
.red {
  background: orangered;
  height: 20px;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
  height: 40px;
}
body {
  margin: 0;
}
</style>

<div id="grid">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

Shorthand Properties

The `place-content` Property

The place-content property is shorthand for justify-content and align-content.

<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-columns: 60px 60px 60px;
  grid-template-rows: 100px;
  grid-gap: 10px;
  place-content: center end;
  background-color: beige;
  height: 100vh;
}

#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
}
.red {
  background: orangered;
  height: 20px;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
  height: 40px;
}
body {
  margin: 0;
}
</style>

<div id="grid">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

The `place-items` Property

The place-items property is shorthand for justify-items and align-items.

<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 10px;
  place-items: end center;
  background-color: beige;
}

#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
}
.red {
  background: orangered;
  height: 40%;
}
.green {
  background: yellowgreen;
  height: 60%;
}
.blue {
  background: steelblue;
  height: auto;
}
body {
  margin: 0;
}
</style>

<div id="grid">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

The `place-self` Property

The place-self property is shorthand for justify-self and align-self.

<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 10px;
  background-color: beige;
}

#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
}
.red {
  background: orangered;
  height: 40%;
  place-self: end;
}
.green {
  background: yellowgreen;
  height: 60%;
  place-self: start center;
}
.blue {
  background: steelblue;
  height: auto;
  place-self: center start;
}
body {
  margin: 0;
}
</style>

<div id="grid">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

CSS Grid Alignment

The align-items Property

The align-self Property

The justify-items Property

The justify-self Property

The justify-content Property

The align-content Property