CSS place-self property

Definition and Usage

place-self This property is used to align a single grid item and is a shorthand for the following properties:

If the place-self property has two values:

place-self: start center;
  • The value of the align-self property is 'start'
  • The value of the justify-self property is 'center'

If the place-self property has only one value:

place-self: end;
  • then the values of the align-self and justify-self properties are both 'end'

Instance

Example 1

Align a single grid item to the end position in both the block and inline directions:

#myDiv {
  place-self: end;
}

Try it yourself

Example 2: Writing Mode

When the <div> element's writing-mode When the property value is set to 'vertical-rl', the grid cell's end position in the block direction moves from the bottom to the left, and in the inline direction, it moves from the right to the bottom:

#contianer {
  display: grid;
  writing-mode: vertical-rl;
}
#myDiv {
  place-self: end;
}

Try it yourself

Example 3: Flexbox layout

place-self The property can also be used for flexbox layout items, but justify-self The second value will be ignored because it is not applicable in flexbox layout:

#contianer {
  display: flex;
}
#myDiv {
  place-self: end stretch;
}

Try it yourself

CSS syntax

place-self: auto|value|initial|inherit;

Property value

Value Description
auto Default. The default place-self value of the element.
normal

Depends on the layout context, but for grid items that have not been set, their behavior is similar to 'stretch' in grid layout.

If a size is set, the behavior of the property value is similar to 'start'.
stretch Stretches to fill the grid cell if the size is not set.
start Aligns the item to the start position in both the inline direction and block direction.
left Aligns the item to the left in the inline direction, as the value of the justify-self property.
center Aligns the item to the center.
end Aligns the item to the end position in both the inline direction and block direction.
right Aligns the item to the right in the inline direction, as the value of the justify-self property.
overflow-alignment

'safe': If the content overflows, sets the item alignment to 'start'.

'unsafe': Keeps 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.placeSelf="end stretch"

Browser support

The numbers in the table indicate the browser version that first fully supports this property.

Chrome Edge Firefox Safari Opera
59.0 79.0 45.0 11.0 46.0

Relevant pages

Tutorial:CSS Grid Layout

Tutorial:CSS Flexbox Layout

Reference:CSS align-self Property

Reference:CSS justify-self attribute

Reference:CSS writing-mode attribute