Shortcut for aligning within cells on both axes in CSS grid

The place-items shortcut property allows you to align items within grid cells along both axes at the same time. The property takes two values separated by a space. The first value specifies the item's location along the vertical axis, and the second value specifies the item's location along the horizontal axis. The property is set on the parent element.

Let's look at how this property works with some examples.

In the center of the vertical and the beginning of the horizontal

<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;
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Let's look at our grid in the debugger:

At the end of the vertical and the center of the horizontal

<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;
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Let's look at our grid in the debugger:

At the beginning of the vertical and the end of the horizontal

<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;
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Let's look at our grid in the debugger:

Practical tasks

Create a grid of six elements and arrange them in two columns. Align the elements to the start of the horizontal axis and the center of the vertical axis of the grid.

Now arrange the grid items across three columns and set the alignment of the items to the center of the horizontal and center of the vertical grid axes.

Modify the previous task so that the alignment of elements occurs at the end of the horizontal and the beginning of the vertical axes of the grid.