align-self Property in CSS Grid Layouts

align-self specifies how browsers should align the selected grid item along its cell's column (block) axis.

The align-self property accepts the following values:

• stretch
• start
• center
• end

Let's discuss the four values.

What Is align-self: stretch in CSS Grid?

stretch is align-self's default value. It stretches the selected grid item to fill its cell's column (block) axis.

align-self's stretch value stretches the selected grid item to fill its cell's column axis

Here's an example:

CSS

section {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 400px;
}

div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

.grid-item1 {
  align-self: stretch;
}

HTML

<section>
  <div class="grid-item1">1</div>
  <div class="grid-item2">2</div>
  <div class="grid-item3">3</div>
  <div class="grid-item4">4</div>
</section>

Try it on StackBlitz

The snippet above used the stretch value to stretch grid-item1 to fill its cell's column axis.

What Is align-self: start in CSS Grid?

start aligns the selected grid item with the column-start edge of its cell's column axis.

align-self's start value aligns the selected grid item to its cell's column-start edge

Here's an example:

CSS

section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 400px;
}

div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

.grid-item1 {
  align-self: start;
}

HTML

<section>
  <div class="grid-item1">1</div>
  <div class="grid-item2">2</div>
  <div class="grid-item3">3</div>
  <div class="grid-item4">4</div>
</section>

Try it on StackBlitz

The snippet above used the start value to align grid-item1 to its cell's column-start edge.

What Is align-self: center in CSS Grid?

center aligns the selected grid item to the center of its cell's column axis.

align-self's center value aligns the selected grid item to its cell's center

Here's an example:

CSS

section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 400px;
}

div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

.grid-item1 {
  align-self: center;
}

HTML

<section>
  <div class="grid-item1">1</div>
  <div class="grid-item2">2</div>
  <div class="grid-item3">3</div>
  <div class="grid-item4">4</div>
</section>

Try it on StackBlitz

The snippet above used the center value to align grid-item1 to its cell's center.

What Is align-self: end in CSS Grid?

end aligns the selected grid item with the column-end edge of its cell's column axis.

align-self's end value aligns the selected grid item to its cell's column-end edge

Here's an example:

CSS

section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: orange;
  margin: 10px;
  height: 400px;
}

div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  padding: 10px;
  border-radius: 5px;
}

.grid-item1 {
  align-self: end;
}

HTML

<section>
  <div class="grid-item1">1</div>
  <div class="grid-item2">2</div>
  <div class="grid-item3">3</div>
  <div class="grid-item4">4</div>
</section>

Try it on StackBlitz

The snippet above used the end value to align grid-item1 to its cell's column-end edge.

Overview

This article discussed what a CSS align-self property is. We also discussed its values.

I hope you've found this article helpful. Please feel free to share your thoughts by leaving a comment below. And you can also buy me a coffee.😊

Tweet this article