CSS Grid Container - Align Grid Content
CSS Grid Container - Align Grid Content
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 foralign-contentandjustify-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-evenlyspace-aroundspace-betweencenterstartend
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.
Example
The space-evenly value displays the grid items with equal space around them:
.container {
display: grid;
justify-content: space-evenly;
}
Result:
Example
The space-around value displays the grid items with space
around them:
.container {
display: grid;
justify-content: space-around;
}
Result:
Example
The space-between value displays the grid items with space between them:
.container {
display: grid;
justify-content: space-between;
}
Result:
Example
The center value positions the grid items in the center of the container:
.container {
display: grid;
justify-content: center;
}
Result:
Example
The start value positions the grid items at the
start of the container:
.container {
display: grid;
justify-content: start;
}
Result:
Example
The end value positions the grid items at the end of the container:
.container {
display: grid;
justify-content: end;
}
Result:
The 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-evenlyspace-aroundspace-betweencenterstartend
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.
Example
The center value positions the grid items in the middle of the container:
.container {
display: grid;
height: 300px;
align-content: center;
}
Result:
Example
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;
}
Result:
Example
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;
}
Result:
Example
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;
}
Result:
Example
The start value positions the grid items
at the start of the container:
.container {
display: grid;
height: 300px;
align-content: start;
}
Result:
Example
The end value positions the grid items at
the end of the container:
.container {
display: grid;
height: 300px;
align-content: end;
}
Result:
The 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;- thealign-contentvalue is 'start' andjustify-contentvalue is 'center'
If place-content has one value:
-
place-content: end;- bothalign-contentandjustify-contentvalues 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.
Example
The center value positions the grid items in the middle of the container
(both vertically and horizontally):
.container {
display: grid;
height: 300px;
place-content: center;
}
Result:
Example
The end space-between value aligns the grid lines towards the bottom of the grid container,
and aligns the grid items with the same space between them horizontally:
.container {
display: grid;
height: 300px;
place-content: end space-between;
}
Result:
