# place-items property

The `place-items` property sets the simultaneous alignment of columns and rows, which significantly reduces the code we use. With the first value we specify the position of the element along the block, and the second value along the inline axes. The `place-items` property is set on the parent element. Working with `place-items` is conveniently viewed through the browser debugger.

## Syntax

`selector { place-items: horizontal alignment value vertical alignment value; }`

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

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>` `#parent { display: grid; place-items: center start; grid-template-columns: 100px 100px; 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; }`

:

Let's look at our grid through the browser debugger:

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

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; place-items: end center; grid-template-columns: 100px 100px; 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; }`

:

Now let's take a look at the debugger panel:

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

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; place-items: start end; grid-template-columns: 100px 100px; 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; }`

:

Let's take a look at aligning elements in cells using the browser debugger:

## See also

- the `justify-items` property
  that sets an alignment of elements inside grid cells along the inline axis
- the `align-items` property
  that sets an alignment along the cross axis

← →
↑
en ru