Four card feature section using Flexbox and Grid
Design comparison
Solution retrospective
Esse projeto foi realizado usando Grid que é um tópico que ainda não tenho prática. O resultado ficou um pouco parecido com o da imagem.
What challenges did you encounter, and how did you overcome them?Minhas dificuldades foram em grid-template-columns
e grid-template-rows
.
Gostaria de dicas de como organizar melhor os elementos utilizando os comandos acima.
Community feedback
- @TechEdDan2Posted 8 months ago
Perdón por escribir en inglés, pero deberías poder utilizar el traductor integrado de Chrome.
I used Flexbox to create my project, so I do not know how helpful I can be with grid... I am also learning to be more comfortable with it, too. I tried experimenting with your .team{ grid-row: 1; grid-column: 2; } and .karma{ grid-row: 3; grid-column: 2; } class selectors, but couldn't get the centering of the cards to quite work. Have you checked out https://css-tricks.com/snippets/css/complete-guide-grid/ as a resource? I also really liked watching Kevin Powell's videos, like: https://youtu.be/8QSqwbSztnA?si=_a5qbm0rswUVVAXr or https://youtu.be/rg7Fvvl3taU?si=cHi2dcHCp6OotGjD where he goes over a Frontend Mentor Project using grid. Good Luck!
0
Please log in to post a comment
Log in with GitHubJoin 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