CSS Grid Item Align
In this page:
item {
justify-self: start | center | end | stretch;
align-self: start | center | end | stretch;
}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.
- Accepted values:
- justify-self — start | end | center | stretch
- align-self — start | end | center | stretch | baseline
- place-self — shorthand for align then justify
- auto — inherits the container's setting (default)
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.
- Accepted values:
- auto — default, uses the container's justify-items
- normal — behaves like stretch for grid items
- start | end | center | left | right — horizontal positions
- stretch — fills the cell
- baseline — aligns baselines
- self-start | self-end — logical alignment
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
- Accepted values:
- auto — default, uses the container's align-items
- normal — behaves like stretch for grid items
- start | end | center — vertical positions
- stretch — fills the cell
- baseline — aligns baselines
- self-start | self-end — logical alignment
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
- Accepted values:
- justify-self: end — pins to the right edge of the cell
- align-self: end — pins to the bottom edge of the cell
- place-self: end — both at once
- place-self: <align> <justify> — shorthand
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.
- Accepted values:
- align-self — overrides align-items
- justify-self — overrides justify-items
- place-self — shorthand for both
- auto — defer to the container
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>- Setting
justify-selfon the container, when it belongs on the item. - Expecting
align-selfto work on a flex layout in the same way as grid, when it works on a cross axis. - Forgetting that item alignment does nothing if the item fills its whole grid area.
CSS Grid is supported in Chrome 57+, Firefox 52+, Safari 10.1+ and Edge 16+.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: