The place-self property is a convenient shorthand that sets how a single element is aligned within its containing alignment container along both the inline and block axes. It effectively lets you control an element’s positioning relative to the available space inside the container without having to set each axis separately. Because it maps directly to the two axis-specific alignment properties, it’s commonly used to express an element’s alignment in a single, compact declaration — useful when you want to override the container defaults for one item.

As a shorthand, place-self combines the behaviors of align-self (block-axis alignment) and justify-self (inline-axis alignment). That means you can change how an item is positioned vertically (or along the block axis) and horizontally (or along the inline axis) in one place. If a given layout mode or container does not honor one of those underlying properties (for example, many flex layouts ignore inline-axis alignment for individual items), the corresponding component of the shorthand has no effect while the other component still applies.

How place-self actually affects placement depends on the container’s layout model and its alignment settings. In grid layouts it directly controls a grid item’s alignment inside its grid area; in contexts that supply default alignment via a container-level property such as place-items, using place-self on a child overrides the container defaults for that specific item. It also respects logical axes, so its effect follows writing-mode and direction (for example, vertical writing modes swap which axis is considered “inline” or “block”), and it interacts with available free space and size constraints — if there’s no extra space along an axis, alignment settings may visually have no effect.