Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Usando CSS Grid por primera vez

@Blackpachamame

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Siempre me negaba a usar CSS Grid porque sentía que la tenía mucho más clara con Flexbox. Sin embargo, al intentar hacer este desafío con flexbox se me hizo más complejo y rebuscado de lo que pensaba, así que decidí darle una oportunidad a CSS Grid.

Se me hizo mucho mas sencillo colocar cada elemento donde lo quería. También, en un principio use grid-column y grid-row, el inconveniente que tenía con esto era que al cambiar el alto de una tarjeta, el resto se mantenía indiferente a ese cambio. Por lo que, de acuerdo al tamaño de la pantalla, se notaba la diferencia entre unas y otras. Esto se corrigió cuando reemplace grid-column y grid-row con grid-templates-areas y no solo se soluciono, si no que me ahorro líneas de código.

En fin, este desafío me abrió las puertas a un mundo nuevo: CSS Grid 😄

Community feedback

Danilo Blas 6,300

@Sdann26

Posted

Revisando todo tu código te puedo decir que lo has hecho espectacular, desde mi vista sin ningún error.

Ahora viendo tu código CSS si no te recomiendo usar el ID como selector por un tema de especifidad ya que cuando hay mucho código de por medio se vuelve díficil mantener esto.

No se si sabes pero comienza a utilizar metodología BEM que es una metodología para nombrar tus clases en CSS que es bastante sencilla y util, mejor si comienzas a combinarla con SASS.

Sigue así, éxitos en tus futuros proyectos! :D

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord