Curso Profesional de CSS Grid Layout

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

He elaborado el siguiente instructivo detallando paso por paso para lograr el alineamiento.

  1. Resultado esperado
    esperado.png
    _

  2. Un poco de teoría visual
    translate-defi.png
    Nota: Recuerda que la función CSS translate se usa dentro de la propiedad transform, como veremos más adelante.
    _

  3. Empezamos con el setup de un contenedor con 9 cajitas por dentro, cada una de las cuales posee una cajita hija.
    _
    setup-1.png
    _
    setup-2.png
    _
    setup-3.png
    _
    setup-4.png
    _
    setup-5.png
    _
    setup-6.png
    _

  4. Ahora empecemos con la alineación:
    _
    pos-trans_trans-1.png
    _
    pos-trans_trans-2.png
    _
    pos-trans_trans-3.png
    _
    pos-trans_trans-4.png
    _
    pos-trans_trans-5.png
    _
    pos-trans_trans-6.png
    _
    pos-trans_trans-7.png
    _
    pos-trans_trans-8.png
    _
    pos-trans_trans-9.png
    _
    pos-trans_trans-10.png
    _
    pos-trans_trans-11.png
    _
    pos-trans_trans-12.png
    _
    pos-trans_trans-13.png
    _
    pos-trans_trans-14.png
    _
    pos-trans_trans-15.png
    _
    pos-trans_trans-16.png
    _
    pos-trans_trans-17.png
    _
    pos-trans_trans-18.png

Curso Profesional de CSS Grid Layout

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

0 Comentarios

para escribir tu comentario

Artículos relacionados