CSS Grid Items - Alignment
Inside its grid cell, an item can be positioned with three properties:
justify-self— aligns the item horizontally inside the cell.align-self— aligns the item vertically inside the cell.place-self— shorthand combiningalign-selfandjustify-self.
To align every grid item in one go, put justify-items and align-items on the grid container instead.
The CSS justify-self Property
Horizontal (inline direction) placement of a grid item within its cell is handled by the justify-self property.
Tip: On an English page, the inline direction runs left to right and the block direction runs top to bottom.
Its possible values are auto (default), normal, stretch, start, left, center, end, right.
Note: Without free space around the item in the inline direction, this property does nothing.
Example
Here justify-self moves items horizontally inside their own grid cells.
justify-self: right and item 6 to use justify-self: center to show horizontal alignment within grid cells.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>justify-self Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 {
justify-self: right;
}
.item6 {
justify-self: center;
}
</style>
</head>
<body>
<h1>The justify-self Property</h1>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
The CSS align-self Property
Vertical placement, in the block direction, is what align-self does for a grid item in its cell.
You can set it to auto (default), normal, stretch, start, end, center.
Note: The item must have free space around it in the block direction, or the property changes nothing.
Example
Here align-self moves items vertically inside their own grid cells.
align-self: start and item 6 to use align-self: center to show vertical alignment within grid cells.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>align-self Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 80px 80px;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 {
align-self: start;
}
.item6 {
align-self: center;
}
</style>
</head>
<body>
<h1>The align-self Property</h1>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
CSS Grid Item Alignment Properties
The properties for grid item alignment at a glance:
align-self— aligns an item inside its cell along the block direction.justify-self— aligns an item inside its cell along the inline direction.place-self— shorthand combiningalign-selfandjustify-self.