Flash cards
Review the key moves
What is the main idea behind CSS Grid Container - Align Grid Content?
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.
___-evenlyPut the learning moves in the order that makes the concept easiest to apply.
Inside the grid container you can define the alignment of the grid content with the following properties:
- justify-content - Aligns the grid content when it does not use all available space on the main-axis (horizontally)
- align-content - Aligns the grid content when it does not use all available space on the cross-axis (vertically)
- place-content - Shorthand property for align-content and justify-content
The CSS justify-content Property
The justify-content property is used to align the grid content when it does not use all available space on the main-axis (horizontally).
This property can have one of the following values:
- space-evenly
- space-around
- space-between
- center
- start
- end
Note
The grid content's total width has to be less than the container's width for the justify-content property to have any effect.
space-evenlyspace-aroundspace-betweencenterstartendThe CSS align-content Property
The align-content property is used to align the grid content when it does not use all available space on the cross-axis (vertically).
This property can have one of the following values:
- space-evenly
- space-around
- space-between
- center
- start
- end
Note
The grid content's total height has to be less than the container's height for the align-content property to have any effect.
In the following examples we use a 300 pixels high container, to better demonstrate the align-content property.
centerspace-evenlyspace-aroundspace-betweenstartendThe CSS place-content Property
The place-content property is a shorthand property for the align-content and the justify-content properties.
If place-content has two values
- place-content: start center; - the align-content value is 'start' and justify-content value is 'center'
If place-content has one value
- place-content: end; - both align-content and justify-content values are 'end'
Note
The grid item's total height and width has to be less than the container's height and width for the place-content property to have any effect.
centerend space-between