CSS: justify-self (grid)

ai answer

The CSS justify-self property aligns an individual element within its alignment container along the inline axis (horizontal in left-to-right languages). It is primarily used in CSS Grid layouts but also applies to block and absolutely positioned elements; it is ignored in Flexbox.

This property allows a single item to override the parent container’s justify-items setting. Key values include:

• center: Aligns the item in the middle of its grid cell.
• start / end: Aligns the item to the beginning or end of the inline axis.
• stretch: Expands the item to fill the grid cell (default).
• auto: Inherits the value from the parent’s justify-items.

Unlike justify-items (which sets the default for all children) or justify-content (which aligns the entire grid within the container), justify-self targets only the specific element it is applied to.