# place-self property

The `place-self` property specifies an alignment of an individual element in a grid along both the inline and block axes. In the property value, the first item indicates the vertical alignment, the second – the alignment of a single element in the grid along the inline axis. The property is set in the element we want to align.

## Syntax

`element { place-self: value for vertical value for horizontal; }`

## Example . Alignment to the center of the block and the start of the inline axes

`<div id="parent"> <div id="elem1">1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; grid-template-columns: 100px 100px; grid-template-rows: repeat(3, 1fr); gap: 10px; padding: 10px; border: 2px solid #696989; height: 200px; width: 400px; } #parent > div { gap: 10px; padding: 10px; box-sizing: border-box; border: 1px solid #696989; } #elem1 { place-self: center start; }`

:

## Example . Alignment to the start of the block and end of the inline axes

`<div id="parent"> <div id="elem1">1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; grid-template-columns: 100px 100px; grid-template-rows: repeat(3, 1fr); gap: 10px; padding: 10px; border: 2px solid #696989; height: 200px; width: 400px; } #parent > div { gap: 10px; padding: 10px; box-sizing: border-box; border: 1px solid #696989; } #elem1 { place-self: start end; }`

:

## Example . Alignment to the end of the block and center of the inline axis

`<div id="parent"> <div id="elem1">1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; grid-template-columns: 100px 100px; grid-template-rows: repeat(3, 1fr); gap: 10px; padding: 10px; border: 2px solid #696989; height: 200px; width: 400px; } #parent > div { gap: 10px; padding: 10px; box-sizing: border-box; border: 1px solid #696989; } #elem1 { place-self: end center; }`

:

## See also

- the `justify-self` property
  that sets the alignment of a single element in a grid along the inline axis
- the `align-self` property
  that specifies an alignment of a single block

← →
↑
en ru