1. css
  2. /properties
  3. /place-self

place-self

Definition

The place-self property is a shorthand property in CSS that sets both the align-self and justify-self properties in a single declaration. It is used to align and justify an individual grid item within a grid container. The align-self property aligns the item vertically, while the justify-self property aligns the item horizontally.

Examples

Center an item both horizontally and vertically:

.item {
  place-self: center;
}

Align an item to the top left corner:

.item {
  place-self: start start;
}

Align an item to the bottom right corner:

.item {
  place-self: end end;
}

Values

ValueDescription
autoThe item is aligned according to the align-items and justify-items properties of the grid container.
startAligns the item to the start of the container.
endAligns the item to the end of the container.
centerCenters the item in the container.
stretchStretches the item to fill the container.
baselineAligns the item such that its baseline aligns.

Best Practices

  • Use this property on individual grid items to align and justify them within their grid container.
  • Use meaningful values for the place-self property to ensure that the items are aligned and justified correctly and look good across a variety of devices and screen sizes.
  • Consider using the align-self and justify-self properties separately if you need more fine-grained control over the vertical and horizontal alignment of individual items, respectively.
  • Test your content on different devices and in different browsers to ensure that it renders correctly and looks good across a variety of contexts.
  • Avoid using this property excessively on a single page or website, as it can become difficult to maintain and may negatively impact performance.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes