In this section, we will learn what the grid place-items property is and how to use it in CSS.
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.
Is equal to:
justify-items: center; align-items: center;