Grid alignment: self

Now it's time to consider the last set of properties to align grid elements. There are just three of them.

Justify-self

This property is used to align an individual grid item along the inline axis. It defines how the grid item should be justified horizontally. The values for justify-self are:

• start. It aligns the grid items to the starting edge.

.item {
  min-width: 100px;
  background: #22388e;
  border: 1px dashed #b2b2b2;
}

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

  justify-items: stretch;
}

.item--special {
  justify-self: start;
}

• end. It aligns the grid items to the ending edge.

.item--special {
  justify-self: end;
}

• center. It aligns the grid items at the center.

.item--special {
  justify-self: center;
}

• stretch. Stretch the grid item to fill the entire height of the element.

.item--special {
  justify-self: stretch;
}

Align-self

This property is applied to the content inside a single grid item and aligns it along the column axis. The values for align-self are:

• start. It aligns the grid items to the starting edge.

.item {
  min-height: 60px;
  background: #22388e;
  border: 1px dashed #b2b2b2;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 150px 1fr;
  grid-template-rows: repeat(2, 100px);
  gap: 15px;
  width: 500px;
  border: 1px dashed #5e5e5e;

  align-items: stretch;
}

.item--special {
  align-self: start;
}

• end. It aligns the grid items to the ending edge.

.item--special {
  align-self: end;
}

• center. It aligns the grid items at the center.

.item--special {
  align-self: center;
}

• stretch. It stretches the grid items to fill the entire height of the element.

.item--special {
  align-self: stretch;
}

Place-self

It is a shorthand for align-self and justify-self properties. It allows you to set both properties in a single declaration. The order of the values should be as follows:

Place-items: <align-self> <justify-self>;

.item {
  min-height: 60px;
  min-width: 60px;
  background: #22388e;
  border: 1px dashed #b2b2b2;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 150px 1fr;
  grid-template-rows: repeat(2, 100px);
  gap: 15px;
  width: 500px;
  border: 1px dashed #5e5e5e;
}

.item--special {
  place-self: stretch end;
}

Conclusion

These properties provide flexibility in aligning grid items within a grid. By using justify-self, align-self, and place-self, you can control the horizontal and vertical alignment of individual grid items.

Let's move on to the tasks!