CSS Grid Item Align
In this page:
Why Item-Level Overrides Exist
justify-items and align-items set a default alignment for every item in the grid, but justify-self and align-self let one specific item break from that default without affecting its siblings.
Example: Why Item-Level Overrides Exist
<style>
.container {
display: grid;
justify-items: start;
background: #eee;
padding: 10px;
gap: 10px;
}
.container div {
background: lightblue;
padding: 8px;
}
.special {
justify-self: end;
background: coral;
}
</style>
<div class="container">
<div>Default</div>
<div class="special">Overridden</div>
</div>justify-self: Horizontal Override
justify-self accepts the same values as justify-items (start, end, center, stretch) but applies only to the single item where it is declared, overriding whatever justify-items set at the container level.
Example: justify-self: Horizontal Override
<style>
.container {
display: grid;
background: #eee;
padding: 10px;
}
.item {
justify-self: center;
background: coral;
padding: 8px;
}
</style>
<div class="container">
<div class="item">Centered horizontally, only this item</div>
</div>align-self: Vertical Override
align-self is the vertical equivalent, letting one item align differently on the vertical axis than its siblings without touching align-items on the container.
Example: align-self: Vertical Override
<style>
.container {
display: grid;
height: 150px;
background: #eee;
}
.item {
align-self: end;
background: coral;
padding: 8px;
}
</style>
<div class="container">
<div class="item">Aligned to the bottom, only this item</div>
</div>Common Use: Pinning One Item to a Corner
A frequent pattern is justify-self: end combined with align-self: start on a single item, pinning it to the top-right corner of its cell while every other item follows the normal container alignment.
Example: Common Use: Pinning One Item to a Corner
<style>
.container {
display: grid;
height: 150px;
background: #eee;
}
.badge {
justify-self: end;
align-self: start;
background: coral;
padding: 8px;
}
</style>
<div class="container">
<div class="badge">Pinned to the top-right corner</div>
</div>Precedence Over Container Defaults
When both a container-level property (like align-items: stretch) and an item-level self property (like align-self: center) apply to the same item, the item-level self property always wins.
Example: Precedence Over Container Defaults
<style>
.container {
display: grid;
align-items: stretch;
height: 150px;
background: #eee;
}
.item {
align-self: center;
background: coral;
padding: 8px;
}
</style>
<div class="container">
<div class="item">align-self wins over the container's align-items</div>
</div>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: