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 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)normalstretchstartleftcenterendright
Note: For this property to have any alignment effect, the grid item need available space around itself in the inline direction.
Example
Using the justify-self property:
.item1 {justify-self: right;}
.item6 {justify-self:
center;}
Result:
The 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)normalstretchstartendcenter
Note: For this property to have any alignment effect, the grid item need available space around itself in the block direction.
Example
Using the align-self property:
.item1 {align-self: start;}
.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 for align-self and justify-self |
