Propiedad abreviada para alinear elementos en ambas direcciones dentro de las celdas en CSS Grid

Con la propiedad abreviada place-items puedes alinear elementos simultáneamente dentro de las celdas de la cuadrícula en ambas direcciones. La propiedad acepta dos valores, separados por un espacio. Con el primer valor establecemos la posición del elemento en la dirección vertical, y con el segundo - en la horizontal. La propiedad se establece en el elemento contenedor.

Veamos el funcionamiento de esta propiedad con ejemplos.

Centrado vertical e inicio 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;
}

Veamos nuestra cuadrícula en las herramientas de desarrollo:

Final vertical y centrado 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;
}

Veamos nuestra cuadrícula en las herramientas de desarrollo:

Inicio vertical y final 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;
}

Veamos nuestra cuadrícula en las herramientas de desarrollo:

Tareas prácticas

Crea una cuadrícula que conste de seis elementos y colócalos en dos columnas. Realiza la alineación de los elementos al inicio de la dirección horizontal y al centro de la dirección vertical de la cuadrícula.

Ahora coloca los elementos de la cuadrícula en tres columnas y establece la alineación de los elementos al centro de la dirección horizontal y al centro de la dirección vertical de la cuadrícula.

Modifica la tarea anterior para que la alineación de los elementos se realice al final de la dirección horizontal y al inicio de la dirección vertical de la cuadrícula.