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