Loading lesson path
Formula
CSS Grid Container - Align Grid ContentInside the grid container you can define the alignment of the grid content with the following properties:
Formula
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 - contentThe 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:
Formula
space - evenly space - around space - between center start endThe grid content's total width has to be less than the container's width for the justify-content property to have any effect.
Formula
The space - evenly value displays the grid items with equal space around them:.container {display: grid;
justify-content: space-evenly;
}Formula
The space - around value displays the grid items with space around them:.container {display: grid;
justify-content: space-around;
}Formula
The space - between value displays the grid items with space between them:.container {display: grid;
justify-content: space-between;
}The center value positions the grid items in the center of the container:.container {
display: grid;
justify-content: center;
}The start value positions the grid items at the start of the container:.container {
display: grid;
justify-content: start;
}The end value positions the grid items at the end of the container:.container {
display: grid;
justify-content: end;
}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:
Formula
space - evenly space - around space - between center start endThe grid content's total height has to be less than the container's height for the align-content property to have any effect.
Formula
In the following examples we use a 300 pixels high container, to better demonstrate the align - content property.The center value positions the grid items in the middle of the container:.container {
display: grid;
height: 300px;
align-content: center;
}With space-evenly, the grid lines are evenly distributed in the grid container, with equal space on top, bottom and between:.container {
display: grid;
height: 300px;
align-content: space-evenly;
}With space-around, the space between the grid lines are equal, but the space before the first grid item and after the last grid item is set to half of the space between the grid lines:.container {
display: grid;
height: 300px;
align-content: space-around;
}With space-between, the space between the grid lines are equal, but the first grid item is flush with the start edge of the container, and the last grid item is flush with the end edge of the container:.container {
display: grid;
height: 300px;
align-content: space-between;
}