In this section, we will learn what the grid place-self property is and how to use it in CSS.

Click here to run the example grid place-self property.

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.

Example:

place-self: center;

Is equal to:

justify-self: center;

align-self: center;

Example: place-self in CSS

See the Pen place-self in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

Example: grid place-self property

See the Pen grid place-self property by Enjoy Tutorials (@enjoytutorials) on CodePen.