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

Click here to run the example of grid place-items property.

CSS grid place-items Property Definition and Usage

If we want to change the vertical and horizontal position of all items within their cells in a grid, we use `justify-items` and `align-items` respectively. But using these properties might be tedious for some developers!

For this reason, CSS provided a shorthand property named `place-items` by which we can position items vertically and horizontally in one declaration.

CSS grid place-items Property Syntax

place-items: align-items-value justify-items-value;

CSS grid place-items Property Value

• The first value aligns items. Any value we set for `align-items` can be used here as well.
• The second value justifies items. Any value we set for `justify-items` can be used here as well.

Note: because the values for `align-items` and `justify-items` are the same, we can use only one value if we want to use equal values for both of them.

Example:

place-items: center;

Is equal to:

justify-items: center;

align-items: center;

Example: place-items in CSS

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

Example: CSS grid place-items property

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