Alineación de contenido a lo largo del eje horizontal en CSS Grid

En Grid, puede ser necesario no solo colocar, sino también alinear el contenido a lo largo del eje horizontal del grid. En este caso, usamos la propiedad justify-content, que se define en el elemento padre. Veamos con ejemplos cómo funciona esta propiedad.

Al inicio del eje

Establezcamos la alineación para nuestros elementos 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;
	justify-content: start;
	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;
}

Al centro del eje

Y ahora establezcamos la alineación para nuestros elementos al centro 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;
	justify-content: center;
	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;
}

Al final del eje

Establezcamos la alineación para nuestros elementos al final 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;
	justify-content: end;
	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;
}

Tareas prácticas

Crea un grid que conste de seis elementos, dispuestos en dos columnas. Realiza la alineación de los elementos al inicio del eje horizontal del grid.

Ahora coloca los elementos del grid en tres columnas y establece la alineación de los elementos al centro del eje horizontal del grid.

Modifica la tarea anterior de modo que la alineación de los elementos ocurra al final del eje horizontal.