Grid items can be aligned within their respective grid cells using properties like:
- justify-self - Specifies the horizontal alignment within a cell
- align-self - Specifies the vertical alignment within a cell
- place-self - Shorthand property for align-self and justify-self
These can also be applied to all grid 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 a grid item within its grid cell in the inline direction.
Tip
For pages in English, inline direction is left to right and block direction is top to bottom.
This property can have one of the following values:
- auto (default)
- normal
- stretch
- start
- left
- center
- end
- right
Note
For this property to have any alignment effect, the grid item need available space around itself in the inline direction.
justify-selfThe CSS align-self Property
The align-self property is used to align a grid item within its grid cell in the block direction.
This property can have one of the following values:
- auto (default)
- normal
- stretch
- start
- end
- center
Note
For this property to have any alignment effect, the grid item need available space around itself in the block direction.
align-selfCSS Grid Item Alignment Properties
| Property | Description |
|---|---|
| align-self | Align a grid item within its grid cell in the block direction |
| justify-self | Align a grid item within its grid cell in the inline direction |
| place-self | A shorthand property for align-self and justify-self |