Flash cards
Review the key moves
What is the main idea behind CSS Grid Items - Alignment?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___-selfPut the learning moves in the order that makes the concept easiest to apply.
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 |