CSSplace-self Property
Example
Align an individual grid item at the end in the block and inline directions:
place-self: end;
}
More "Try it Yourself" examples below.
Definition and Usage
Theplace-self property is used to align individual grid items, and is a shorthand property for the following properties:
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'
| Default value: | auto |
|---|---|
| Inherited: | no |
| Animatable: | no.Read aboutanimatable |
| 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
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 |
| |
| baseline alignment | The element is aligned with the baseline of the parent. | Demo ❯ |
| initial | Sets this property to its default value.Read aboutinitial | |
| inherit | Inherits this property from its parent element.Read aboutinherit |
More Examples
Writing-mode
With thewriting-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:
display: grid;
writing-mode: vertical-rl;
}
#myDiv {
place-self: end;
}
Flexbox
Theplace-self property can also be used for flexbox items, but the second value forjustify-self will be ignored because it is not applicable with flexbox:
display: flex;
}
#myDiv {
place-self: end stretch;
}
Related Pages
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
