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