In this section, we will learn what the grid place-self property is and how to use it in CSS.
CSS grid place-self Property Definition and Usage
If we want to change the vertical and horizontal position of a specific item within a cell in a grid, we use `justify-self` and `align-self` respectively. But using these properties might be tedious for some developers!
For this reason, CSS provided a shorthand property named `place-self` by which we can position an item vertically and horizontally in one declaration.
CSS grid place-self Property Syntax
place-self: align-self-value justify-self-value;
CSS grid place-self Property Value
- The first value aligns the target item. Any value we set for `align-self` can be used here as well.
- The second value justifies the target item. Any value we set for `justify-self` can be used here as well.
Note: because the values for `align-self` and `justify-self` are the same, we can set only one value if we want to use equal values for both of them.
Is equal to:
justify-self: center; align-self: center;