CSS Grid Items - Alignment
CSS Grid Items - Alignment
Grid items can be aligned within their respective grid cells using properties like:
justify-self- Specifies the horizontal alignment within a cellalign-self- Specifies the vertical alignment within a cellplace-self- Shorthand property foralign-selfandjustify-self
These can also be applied to all items in a container using justify-items and align-items on the grid container.
The CSS justify-self Property
The justify-self property is used to align the content
of a grid item along the row axis.
Example
.item1 {
justify-self: right;
}
.item6 {
justify-self:
center;
}
Result:
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
The CSS align-self Property
The align-self property is used to align the
content of a grid item along the column axis.
Example
.item1 {
align-self: start;
}
.item6 {
align-self: center;
}
Result:
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
CSS Grid Item Alignment Properties
| Property | Description |
|---|---|
| align-self | Aligns the content for a specific grid item along the column axis |
| justify-self | Aligns the content for a specific grid item along the row axis |
| place-self | A shorthand property for align-self and justify-self |
