CSS Grid Alignment
CSS Grid alignment controls how Grid items and the complete Grid are positioned inside the Grid container.
CSS Grid provides properties such as align-items, justify-items, place-items, align-content, and justify-content for alignment.
What is Grid Alignment?
Grid alignment determines the position of Grid items horizontally and vertically inside their Grid areas.
Alignment can be applied to individual items, all items in the Grid, or the complete Grid structure.
align-items
The align-items property controls the vertical alignment of Grid items inside their Grid cells.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 150px;
align-items: center;
}The value center places the Grid items vertically in the center of their Grid cells.
justify-items
The justify-items property controls the horizontal alignment of Grid items inside their Grid cells.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
}The value center places each Grid item horizontally in the center of its Grid cell.
place-items
The place-items property is a shorthand for align-items and justify-items.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
place-items: center;
}The value center centers the items both vertically and horizontally inside their Grid cells.
align-content
The align-content property controls the vertical position of the complete Grid inside the Grid container when extra space is available.
.container {
display: grid;
align-content: center;
}The complete Grid is positioned vertically in the center of the container.
justify-content
The justify-content property controls the horizontal position of the complete Grid inside the Grid container.
.container {
display: grid;
justify-content: center;
}The complete Grid is positioned horizontally in the center of the container.
place-content
The place-content property is a shorthand for align-content and justify-content.
.container {
display: grid;
place-content: center;
}The complete Grid is centered both vertically and horizontally inside the container.
Common Alignment Values
start
Places content at the start of the available alignment area.
center
Places content in the center of the available alignment area.
end
Places content at the end of the available alignment area.
stretch
Stretches items to fill the available alignment space when possible.
space-between
Distributes available space between Grid tracks.
space-around
Distributes available space around Grid tracks.
Practical Example
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 120px;
gap: 15px;
align-items: center;
justify-items: center;
}
.item {
width: 80px;
height: 50px;
}align-items: center; centers the items vertically.
justify-items: center; centers the items horizontally.
Therefore, every item appears in the center of its Grid cell.
Output
The items are centered vertically and horizontally because the code uses align-items: center; and justify-items: center;.
Items vs Content Alignment
Item Alignment
align-items and justify-items control the position of Grid items inside their individual Grid cells.
Content Alignment
align-content and justify-content control the position of the complete Grid inside the container.
Real-World Uses
- Centering dashboard cards
- Aligning product cards
- Creating balanced layouts
- Centering content inside Grid cells
- Aligning application dashboard components
- Building responsive website layouts
Summary
CSS Grid alignment controls the position of Grid items and the complete Grid. Use align-items for vertical item alignment, justify-items for horizontal item alignment, and place-items as their shorthand. Use align-content and justify-content to position the complete Grid inside its container.