CSS propertyGrid

justify-self

Aligns a single item within its grid cell along the horizontal axis.

Initial value: auto
Inherited: No
Animatable: no
Applies to: grid items and absolutely positioned elements
JavaScript: element.style.justifySelf = "end"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.form {
  display: grid;
  gap: 10px;
}

.form button {
  justify-self: end;
}

Preview

Definition and usage

You set the justify-self property on a grid item to override the container’s justify-items. An item can stretch across its whole cell, or sit at its left edge, right edge, or center.

It’s useful when one item in a row needs different alignment, for example a button pushed to the right in a grid-based form.

This property is ignored on flex items. On an absolutely positioned block, it affects its position within its containing block.

Syntax

justify-self: auto | normal | stretch | start | end | center;

Values

auto
The item follows the container’s justify-items, which stretches by default.
start
Item 2 hugs the left edge of its cell.
center
Item 2 sits in the center of its cell.
end
Item 2 hugs the right edge of its cell.

Value	Description
auto	The item follows the container’s `justify-items`, which stretches by default.
start	Item 2 hugs the left edge of its cell.
center	Item 2 sits in the center of its cell.
end	Item 2 hugs the right edge of its cell.

Values in practice

auto

The item follows the container’s justify-items, which stretches by default.

.target { justify-self: auto; }

start

Item 2 hugs the left edge of its cell.

.target { justify-self: start; }

center

Item 2 sits in the center of its cell.

.target { justify-self: center; }

end

Item 2 hugs the right edge of its cell.

.target { justify-self: end; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

In Flexbox, use an auto margin instead of justify-self, e.g. margin-left: auto.
The place-self shorthand sets both vertical and horizontal alignment at once.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course