CSSGrid 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 grid items in a container usingjustify-items andalign-items on the grid container.
The CSS justify-self Property
Thejustify-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)normalstretchstartleftcenterendright
Note: For this property to have any alignment effect, the grid item need available space around itself in the inline direction.
Example
Using thejustify-self property:
.item6 {justify-self: center;}
Result:
The CSS align-self Property
Thealign-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)normalstretchstartendcenter
Note: For this property to have any alignment effect, the grid item need available space around itself in the block direction.
Example
Using thealign-self property:
.item6 {align-self: center;}
Result:
CSS 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 foralign-self andjustify-self |
