The place-self CSS property is a shorthand property that combines the align-self and justify-self properties. It is used in CSS Grid and CSS Flexbox layouts to control the alignment and positioning of an individual grid or flex item within its container, both horizontally and vertically.
The place-self property accepts two values, representing the alignment and positioning of the item along the block and inline axes, respectively. The values can be specified in any order, separated by a space.
Here are some commonly used values:
-
start: Aligns the item to the start edge of the container. -
end: Aligns the item to the end edge of the container. -
center: Centers the item both horizontally and vertically within its cell or space. -
stretch: Stretches the item to fill the available space in its cell or space. -
baseline: Aligns the item along its baseline.
Here’s an example in a grid container:
.item {
place-self: center end;
}
In this example, the .item class uses place-self: center end;. This centers the item both horizontally and vertically within its cell or space, and aligns it to the end edge of the container.
You can mix and match the available values of place-self to achieve the desired alignment and positioning of an individual grid or flex item within its container. It provides a convenient way to set both the block and inline alignment properties at once, reducing the need for separate align-self and justify-self declarations.
The place-self property is particularly useful when working with CSS Grid and Flexbox layouts, allowing you to easily control the alignment and positioning of individual items, improving the overall design and layout of your webpage.