Propiedad place-items

La propiedad place-items establece la alineación simultánea de columnas y filas, lo que reduce significativamente el código que utilizamos. Con el primer valor establecemos la posición del elemento a lo largo del eje vertical, y con el segundo, a lo largo del eje horizontal. La propiedad place-items se establece en el elemento padre. Es conveniente visualizar el funcionamiento de place-items a través del depurador del navegador.

Sintaxis

selector {
	place-items: valor de alineación horizontal valor de alineación vertical;
}

Ejemplo . Alineación al centro del eje vertical y al inicio del eje 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;
	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;
}

Echemos un vistazo a nuestra cuadrícula a través del depurador del navegador:

Ejemplo . Alineación al final del eje vertical y al centro del eje 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;
	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;
}

Y ahora echemos un vistazo al panel del depurador:

Ejemplo . Alineación al inicio del eje vertical y al final del eje 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;
	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;
}

Echemos un vistazo a la alineación de los elementos en las celdas usando el depurador del navegador:

Véase también

la propiedad justify-items,
que establece la alineación de los elementos dentro de las celdas de la cuadrícula a lo largo del eje horizontal
la propiedad align-items,
que establece la alineación a lo largo del eje transversal