He elaborado el siguiente instructivo detallando paso por paso para lograr el alineamiento.
Resultado esperado
_
Un poco de teoría visual
Nota: Recuerda que la función CSS translate se usa dentro de la propiedad transform, como veremos más adelante.
_
Empezamos con el setup de un contenedor con 9 cajitas por dentro, cada una de las cuales posee una cajita hija.
_
_
_
_
_
_
_
Ahora empecemos con la alineación:
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
_
