# justify-self property

The `justify-self` property specifies an alignment of an individual element in a grid along the inline axis. The property is applied to the element we want to align.

## Syntax

`element { justify-self: start | center | end; }`

## Values

Value | Description
--- | ---
`flex-start` | An element is pressed to the start of the inline axis.
`flex-end` | An element is pressed to the end of the inline axis.
`center` | An element is aligned to the center of the inline axis.

## Example . Alignment to the start of the inline axis

Let's set the alignment of our first element to the start 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 { justify-self: start; }`

:

## Example . Alignment to the center of the inline axis

Let's set the alignment of the first element to the 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 { justify-self: center; }`

:

## Example . Alignment to the end of the inline axis

Let's set the alignment of the first element to the end 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 { justify-self: end; }`

:

## See also

- the `place-self` property
  that specifies an alignment of a single element in a grid
- the `align-self` property
  that specifies an alignment of a single block

← →
↑
en ru