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
| Value | Description |
|---|---|
| auto | The item is aligned according to the align-items and justify-items properties of the grid container. |
| start | Aligns the item to the start of the container. |
| end | Aligns the item to the end of the container. |
| center | Centers the item in the container. |
| stretch | Stretches the item to fill the container. |
| baseline | Aligns 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
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |