CSS place-self Property

❮ Previous Complete CSS Reference Next ❯

Example

Align an individual grid item at the end in the block and inline directions:

#myDiv {
place-self: end;
}

More "Try it Yourself" examples below.

Definition and Usage

The place-self property is used to align individual grid items, and is a shorthand property for the following properties:

align-self
justify-self

If the place-self property has two values:

place-self: start center;
- align-self property value is 'start'
- justify-self property value is 'center'

If the place-self property has one value:

place-self: end;
- align-self and justify-self property values are both 'end'

Show demo ❯

Default value:	auto
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.placeSelf="end stretch" Try it

Browser Support

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

Property
place-self	59.0	79.0	45.0	11.0	46.0

CSS Syntax

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

Property Values

Value	Description	Demo
auto	Default. The element's default place-self value.	Demo ❯
normal	Dependant on layout context, but similar to 'stretch' for grid layout for grid items when size is not set. If size is set, the property value behaves lik 'start'.	Demo ❯
stretch	Stretches to fill the grid cell if size is not set.	Demo ❯
start	Align items at the start in the inline and block directions	Demo ❯
left	Align items to the left in the inline direction, as the justify-self property value.	Demo ❯
center	Align items to the center	Demo ❯
end	Align items at the end in the inline and block directions	Demo ❯
right	Align items to the right in the inline direction, as the justify-self property value.	Demo ❯
overflow-alignment	'safe' sets alignment of the item to 'start' if the content overflows 'unsafe' keeps the alignment value regardless of wether or not the item content overflows
baseline alignment	The element is aligned with the baseline of the parent.	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Writing-mode

With the writing-mode property value of a <div> element set to 'vertical-rl', the end of the grid cell in block direction is moved from bottom to the left, and the end of the grid cell in the inline direction is moved from right to the bottom:

#contianer {
display: grid;
writing-mode: vertical-rl;
}

#myDiv {
place-self: end;
}

Try it Yourself »

Flexbox

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

#contianer {
display: flex;
}

#myDiv {
place-self: end stretch;
}

Try it Yourself »

CSS tutorial: CSS grid

CSS tutorial: CSS flexbox

CSS align-self property: CSS align-self property

CSS jusitfy-self property: CSS justify-self property

CSS writing-mode property: CSS Writing-mode property