justify-self
Override inline-axis alignment for an individual grid item.
Overview
| Class | Declarations |
|---|---|
justify-self:auto | justify-self: auto;
|
justify-self:normal | justify-self: normal;
|
justify-self:baseline | justify-self: baseline;
|
justify-self:left | justify-self: left;
|
justify-self:center | justify-self: center;
|
justify-self:right | justify-self: right;
|
justify-self:stretch | justify-self: stretch;
|
justify-self:start | justify-self: start;
|
justify-self:end | justify-self: end;
|
justify-self:flex-start | justify-self: flex-start;
|
justify-self:flex-end | justify-self: flex-end;
|
justify-self:self-start | justify-self: self-start;
|
justify-self:self-end | justify-self: self-end;
|
justify-self:<value> | justify-self: <value>;
|
Examples
Align one grid item inline
Use justify-self:end to move the blue item to its grid area’s inline end. The parent sets justify-items:start, so the violet sibling stays at the start of its own area. Both items keep an 80px width.
<div id="layout" class="grid grid-cols:2 grid-template-rows:160px items-start justify-items:start gap-md w:17.5rem max-w:100%"> <div id="target" class="justify-self:end h:4rem w:5rem p-sm">Self end</div> <div id="peer" class="h:4rem w:5rem p-sm">Start</div></div>Generated CSS
@layer utilities { .grid { display: grid } .justify-items\:start { justify-items: start } .justify-self\:end { justify-self: end }}This changes the item’s position inside its area, not its grid placement or the positions of the tracks.
Center an item inside its area
justify-self:center centers the image horizontally within the first column in this horizontal writing mode. Its explicit 80px width leaves space on both sides; the parent still aligns the second item to its area’s start.
<div id="layout" class="grid grid-cols:2 grid-template-rows:160px items-start justify-items:start gap-md w:17.5rem max-w:100%"> <img id="target" class="justify-self:center h:4rem w:5rem object-cover" src="/demo/landscape.svg" alt="Sun above layered mountains" /> <div id="peer" class="h:4rem w:5rem p-sm">Start</div></div>Use justify-items to give every grid item the same inline-axis default. Use align-self for the block axis.
Apply conditionally
Use conditional queries to change alignment at a real viewport width. justify-self:auto follows the parent’s start alignment. From sm, the blue item overrides it with end alignment, while the second item stays at the start of its column.
<div id="layout" class="grid grid-cols:2 grid-template-rows:160px items-start justify-items:start gap-md w:17.5rem max-w:100%"> <div id="target" class="justify-self:auto h:4rem w:5rem p-sm justify-self:end@sm">Target</div> <div id="peer" class="h:4rem w:5rem p-sm">Start</div></div>justify-self has no effect on flex items; their main-axis free space is shared by the flex line.