Place Self Shorthand Property
Last updated: 2026-09-13
place-self Place Self Shorthand Property
place-self is a shorthand for align-self and justify-self. It controls the alignment of a single grid item inside its cell. Unlike place-items, place-self is set on the individual grid item and overrides the container-level place-items setting, which handles special alignment needs for one item.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
place-self: <align-self> <justify-self>?;⚙️ Values
| Value | Type | Description |
|---|---|---|
<align-self> / <justify-self> | Value | Single item alignment shorthand |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| place-self | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： place-self: center centers a single grid item in its cell, regardless of the container’s place-items setting.
Tip： The auto value inherits the container’s place-items and is the default behavior.
❓ FAQ
QWhich has higher priority, place-self or place-items?
Aplace-self has the higher priority. place-items is set on the container and defines the default alignment of every grid item, while place-self is set on a single item and overrides that default for that item only, so the rest of the items keep the container behavior. This is the same rule by which align-self and justify-self override align-items and justify-items.
QCan place-self override only one direction?
AYes. With a single value, it applies to both directions: place-self: center centers the item both horizontally and vertically. With two values, the first controls the vertical direction (align-self) and the second the horizontal direction (justify-self), so place-self: start end means top plus right alignment. The same single/two-value rule applies as in place-items, and the shorthand accepts the full keyword set of both align-self and justify-self. When the second value is omitted, it automatically takes the first.
QWhat does place-self: auto mean?
Aauto means “use the container’s default settings”, that is, inherit the container’s align-items and justify-items, which together form its place-items. The default value of place-self is auto, so the items follow the container alignment when nothing is set. Because place-self is a shorthand, writing place-self: auto resets both align-self and justify-self at once; use the longhands if you only want to reset one axis. Writing place-self: auto explicitly is equivalent to not setting it and is often used to override an inherited shared style.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Place Items
Sets the alignment of all grid items on the container
Place Content
Controls how the whole grid aligns inside the container
