CSS justify-self Property

Last Updated : 23 Jul, 2025

The justify-self property aligns a grid item within its grid cell in the inline direction, which is typically left to right for English pages. It requires available space around the item in the inline direction to have an alignment effect.

Syntax:

justify-self: stretch | normal | auto | baseline | start | end | center | flex-start | 
 flex-end | self-start | self-end | left | right | safe | unsafe;

Property Values:

Value	Description
stretch	Default value. Content fills the whole width of the cell.
normal	Behaves as 'start' in block-level layouts. Ignores in table and flex layouts. Acts as 'stretch' in other absolutely positioned boxes.
auto	Default value. Used if justify-items property is located in parent element or defaults to normal value.
baseline	Aligns the alignment baseline of the current box’s first or last baseline with corresponding baseline in shared first or last baseline set of all the boxes.
start	Aligns content to the left of the cell.
end	Aligns content to the right of the cell.
center	Aligns content to the center of the cell.
flex-start	Same as 'start' value.
flex-end	Same as 'end' value.
self-start	Aligns the item to the left of the aligned container at the beginning of an item.
self-end	Aligns the item to the right of the aligned container at the end of an item.
left	Makes the item pack flush to the left of the alignment container.
right	Makes the item pack flush to the right of the alignment container.
safe	Aligns as 'start' if item overflows the alignment container.
unsafe	Aligns as the given value regardless of relative sizes of alignment container and item.