---
title: "CSS grid place-items Property Tutorial"
url: https://weworkworldwide.com/tutorials/css-grid-place-items-property-tutorial/
description: "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."
date: 2026-04-29T22:32:25+00:00
source: https://weworkworldwide.com/llms.txt
---
# CSS grid place-items Property Tutorial
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
``` line-numbers
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:
``` line-numbers
place-items: center;
```
Is equal to:
``` line-numbers
justify-items: center;
align-items: center;
```
## Example: place-items in CSS
``` line-numbers
CSS is fun :)
Item One
Item Two
Item Three
Item Four
Item Five
```
## Example: CSS grid place-items property
``` line-numbers
CSS is fun :)
Item One
Item Two
Item Three
Item Four
Item Five
```