CSS propertyGrid
place-self
A shorthand that sets align-self and justify-self for a single item.
- Initial value
auto- Inherited
- No
- Animatable
- no
- Applies to
- grid items, flex items (vertical only), and absolutely positioned elements
- JavaScript
element.style.placeSelf = "center"
Example
#CSS
.tile {
display: grid;
grid-template-columns: 1fr;
}
.tile .badge {
grid-area: 1 / 1;
place-self: start end;
}Example HTML
<div class="tile stage" style="display: grid;">
<div class="box" style="grid-area: 1 / 1; height: 90px;">Module 5</div>
<span class="badge" style="grid-area: 1 / 1; place-self: start end; margin: 6px; padding: 2px 8px; border-radius: 99px; background: #f43f5e; font-size: 12px;">New</span>
</div>Preview
Definition and usage
#The place-self property combines an item’s vertical alignment (align-self) and horizontal alignment (justify-self). You set it on a specific grid item to position it in its cell differently from the rest.
One value works on both axes, so place-self: center centers an item within its cell. You give two values in order: vertical, then horizontal.
In flex items only the vertical part works, because justify-self is ignored there.
Syntax
#Syntax
place-self: <align-self> <justify-self>?;Values
#- The item follows the container’s alignment and stretches.
- Item 2 is centered in its cell.
- Item 2 sits in the bottom-right corner of its cell.
- At the top and centered horizontally.
Values in practice
#auto
The item follows the container’s alignment and stretches.
.target { place-self: auto; }center
Item 2 is centered in its cell.
.target { place-self: center; }end
Item 2 sits in the bottom-right corner of its cell.
.target { place-self: end; }start center
At the top and centered horizontally.
.target { place-self: start center; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Overlapping items in the same cell (
grid-area: 1 / 1) withplace-selfis a convenient alternative toposition: absolute. - The order of values: vertical first (align), then horizontal (justify).
Related entries
#- align-selfOverrides the cross-axis alignment of a single item.
- justify-selfAligns a single item within its grid cell along the horizontal axis.
- place-itemsA shorthand that sets align-items and justify-items at the same time.
- grid-areaAssigns an item to a named grid area, or sets its rows and columns all at once.
Spotted a mistake or missing an example? Write to us.