justify-self

Allows a single item inside a grid or flex container to override the default alignment set by its parent.

.special-item {
  /* Pushes this specific item to the right edge of its cell */
  justify-self: end;
}
Initial value
auto
Inherited
No
Applies to
blockLevelBoxesAndAbsolutelyPositionedBoxesAndGridItems
Animation type
discrete

Values

autonormalstretchleftrightanchor-center
Widely available Since 2017 95% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2017.

Safe to use without fallbacks.

57+
45+
10.1+
16+
ESC