Loading lesson path
Formula
CSS Grid Items - AlignmentGrid items can be aligned within their respective grid cells using properties like:
Formula
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.Formula
The justify - self property is used to align a grid item within its grid cell in the inline direction.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
For this property to have any alignment effect, the grid item need available space around itself in the inline direction.
Formula
Using the justify - self property:.item1 {justify - self: right;}.item6 {justify - self:center;}Formula
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
For this property to have any alignment effect, the grid item need available space around itself in the block direction.
Formula
Using the align - self property:.item1 {align - self: start;}.item6 {align - self: center;}