Alineación dentro de las celdas de cuadrícula CSS a lo largo del eje horizontal

Para alinear elementos dentro de las celdas de la cuadrícula, es decir, las áreas que surgen en la intersección de columnas y filas, se utiliza la propiedad justify-items, la cual se establece en el elemento padre. La alineación se puede notar más claramente al ver la cuadrícula en las herramientas de desarrollo del navegador.

Al inicio del eje

Alineemos nuestros elementos dentro de las celdas 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-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Y ahora echemos un vistazo a nuestra cuadrícula en las herramientas de desarrollo:

Al centro del eje

Alineemos nuestros elementos en las celdas 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-items: 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;
}

Y ahora echemos un vistazo a nuestra cuadrícula en las herramientas de desarrollo:

Al final del eje

Alineemos 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-items: 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;
}

Y ahora echemos un vistazo a nuestra cuadrícula en las herramientas de desarrollo:

Tareas prácticas

Crea una cuadrícula, que consista en cinco elementos, ubicados en tres filas. Realiza la alineación de los elementos a lo largo del eje horizontal.

Ahora ubica los elementos de la cuadrícula en dos filas y establece la alineación de los elementos en las celdas al centro del eje horizontal.

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