Propiedad place-self

La propiedad place-self establece la alineación de un elemento individual en grid tanto en el eje vertical como en el horizontal. En el valor de la propiedad el primer elemento especifica la alineación en el eje vertical, el segundo - la alineación del elemento individual en grid en el eje horizontal. La propiedad se establece en el elemento que deseamos alinear.

Sintaxis

elemento {
	place-self: valor para vertical valor para horizontal;
}

Ejemplo . Alineación al centro del eje vertical y al inicio del eje 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);
	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;
}
#elem1 {
	place-self: center start;
}

Ejemplo . Alineación al inicio del eje vertical y al final del eje 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);
	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;
}
#elem1 {
	place-self: start end;
}

Ejemplo . Alineación al final del eje vertical y al centro del eje 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);
	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;
}
#elem1 {
	place-self: end center;
}

Véase también

la propiedad justify-self,
que establece la alineación de un elemento individual en grid en el eje horizontal
la propiedad align-self,
que establece la alineación de un bloque individual