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.
Here’s an example:
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.
Here’s an example:
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.
Here’s an example:
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.
Here’s an example:
The snippet above used the end
value to align grid-item1
to its cell’s column-end edge.