The 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:

The place-items property

Syntax

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

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

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

See also