Propiedad abreviada para alinear un elemento individual en CSS Grid

Es posible alinear un elemento individual tanto en el eje horizontal como en el vertical simultáneamente. Para ello se utiliza la propiedad place-self. Esta acepta dos valores separados por un espacio. El primer valor especifica la alineación vertical, y el segundo, la horizontal. Veamos algunos ejemplos.

Centrado vertical y inicio horizontal

<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);
	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;
}
#elem1 {
	place-self: center start;
}

Inicio vertical y final horizontal

<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);
	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;
}
#elem1 {
	place-self: start end;
}

Final vertical y centrado horizontal

<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);
	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;
}
#elem1 {
	place-self: end center;
}

Tareas prácticas

Crea una cuadrícula (grid) compuesta por cinco elementos y colócalos en tres filas. Alinea el primer elemento al inicio del eje horizontal y al centro del eje vertical.

Modifica la tarea anterior para que la alineación del tercer elemento sea al final del eje horizontal y al centro del eje vertical.

Ahora coloca los elementos de la cuadrícula en dos filas y establece la alineación del quinto elemento al centro del eje horizontal y al final del eje vertical.

Configura el sistema para que el segundo elemento esté alineado al inicio del eje horizontal y al final del eje vertical, y el cuarto elemento al centro del eje horizontal y al inicio del eje vertical.