Layout
place-self
place-self is a shorthand for align-self (vertical position) and justify-self (horizontal position). It goes on a single grid item and moves just that item inside its cell.
Syntax
<'align-self'> <'justify-self'>?Preview
Code
.box {
display: grid;
grid-template-columns: 1fr 1fr;
}
.box > :nth-child(2) {
place-self: center;
}Controls
About
Values
Write the align-self value and then the justify-self value, separated by a space (place-self: end center). With one value, both get it. The values are the same as for each property, including two-word values such as safe center and last baseline. The initial value is auto, which follows the place-items (align-items and justify-items) of the container.
The preview on this page sets display: grid and grid-template-columns: 1fr 1fr as helper declarations, placing four items in two columns of cells, and puts place-self on the second item only (.box > :nth-child(2) is a selector for the second child of the box). The other items stay stretched across their cells, and only the outlined item 2 moves both vertically and horizontally.
How it relates to place-items
place-items on the container sets the position of every item inside at once. Put place-self on one item to place just that item differently.
In flexbox
Flexbox ignores justify-self, so only the first value (align-self) has an effect.