CSS justify-self attribute

Definition and Usage

The justify-self attribute aligns the grid item within the grid cell along the inline direction.

For English pages, the inline direction is from left to right, and the block direction is downward.

For this attribute to have any alignment effect, the grid item must leave available space around itself in the inline direction.

Tip:To align grid items in the block direction instead of the inline direction, use align-self attribute Or align-items attribute Properties.

See also:

CSS Tutorial:CSS Grid

CSS Tutorial:CSS Positioning

CSS Reference Manual:align-content attribute

CSS Reference Manual:align-items attribute

CSS Reference Manual:align-self attribute

CSS Reference Manual:direction attribute

CSS Reference Manual:grid attribute

CSS Reference Manual:grid-template-columns attribute

CSS Reference Manual:position attribute

CSS Reference Manual:writing-mode attribute

See also:

Instance

Example 1

Align the grid item to the right of its grid cell:

.red {
  display: grid;
  justify-self: right;
}

Try it yourself

Example 2: justify-self vs justify-items

Set the alignment relative to the container to 'center', and set the grid item itself to 'right-aligned'. The 'right' value prevails:

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

Try it yourself

Example 3: Set justify-self on an absolutely positioned grid item

Set the alignment of the absolutely positioned grid item to 'right':

#container {
  display: grid;
  position: relative;
}
.red {
  position: absolute;
  justify-self: right;
}

Try it yourself

Example 4: writing-mode

When the writing-mode attribute value of the grid container element is set to vertical-rl, the inline direction is downward. The result is that the container's starting point moves from the left to the top, and the container's end moves from the right to the bottom:

#container {
  display: grid;
  writing-mode: vertical-rl;
}
.blue {
  justify-self: end;
}

Try it yourself

Example 5: direction

When the direction property of the grid container element is set to 'rtl', the inline direction is from right to left. The result is that the container's starting point moves from the left to the right, and the container's end moves from the right to the left:

#container {
  display: grid;
  direction: rtl;
}
.blue {
  justify-self: end;
}

Try it yourself

CSS syntax

justify-self: auto|normal|stretch|positional alignment|overflow-alignment|Baseline alignment|initial|inherit;

Attribute value

Value Description
auto Default. Inherits the justify-self property value of the grid container.
normal

Depends on the layout context, but similar to the 'stretch' of the grid item in the grid layout when size is not set.

If size is set, the behavior of the attribute value is similar to 'start'.
stretch If inline-size (width) is not set, it stretches to fill the grid cell.
start Aligns the item at the beginning of the inline direction.
left Aligns the item to the left.
center Aligns the item to the center.
end Aligns the item at the end of the inline direction.
right Aligns the item to the right.
overflow-alignment
  • 'safe' will set the alignment of the item to 'start' if the content overflows.
  • 'unsafe' maintains the alignment value regardless of whether the content overflows.
Baseline alignment Aligns the element with the baseline of its parent element.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value: auto
Inheritance: No
Animation creation: Not supported. See:Animation-related properties.
Version: CSS3
JavaScript syntax: object.style.justifySelf="right"

Browser support

The numbers in the table indicate the first browser version to fully support this property.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
57.0 16.0 45.0 10.1 44.0