Layout
justify-self
justify-self goes on a single grid item and sets where that item sits inside its cell along the inline axis (left to right in horizontal text). It overrides the justify-items of the container for that item.
Syntax
auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | anchor-centerPreview
Code
.box {
display: grid;
grid-template-columns: 1fr 1fr;
}
.box > :nth-child(2) {
justify-self: center;
}Controls
About
Values
auto: the initial value. Uses thejustify-itemsof the container (the parent).normal: for grid items without a set width it works likestretch.stretch: stretches an item without a set width across the cell.start,endandcenter: put the item at the start, end or middle of the cell along the line. The item shrinks to the width of its content.leftandright: put the item at the left or right of the cell, whatever the text direction.self-startandself-end: use the item's own text direction to find the start or end.baselineandlast baseline: line up the items in the same column by their text baselines. Horizontal items in a horizontal grid have no baseline running across, sobaselineends up in about the same place asstart.anchor-center: centers an element placed with anchor positioning on its anchor.
Putting safe before center and similar values switches to start when the item is wider than its cell, so its start side does not get cut off. unsafe keeps the alignment even if the item overflows.
The preview on this page sets display: grid and grid-template-columns: 1fr 1fr as helper declarations, placing four items in two columns of cells, and puts justify-self on the second item only (.box > :nth-child(2) is a selector for the second child of the box). The other items stay stretched across their cells, and only the outlined item 2 moves left and right.
How it relates to justify-items
justify-items on the container sets the position of every item inside at once. Put justify-self on one item to place just that item differently. align-self sets the vertical position, and place-self sets both at once.
Outside grids
- Flexbox ignores it. To push a single item to the right, put
margin-left: autoon that item. - On a
position: absoluteelement it sets the horizontal position within the area set byinset. Chrome and Edge 122, Firefox 134 and Safari 26 and later support this. - The spec also applies it to children of block boxes (
display: block), but only Chrome and Edge 130 and later support that so far.
Not covered on this page
flex-start and flex-end are allowed too, but in a grid they are the same as start and end. The controls on this page don’t cover them, but you can type them into the code.