Design comparison
SolutionDesign
Solution retrospective
idk
Community feedback
- @jmnyaregaPosted over 3 years ago
Hi @ddaniel27.
- You are on the right path, you can use
grid-template-areas
to make the solution more elegant. On the design, we have 4 cards,supervisor
,team-builder
, 'calculator' andkarma
. Grid areas allow us to create layouts visually in our code, check this out.
display: grid; grid-gap: 1rem; // some spacing between cards grid-template-areas: 'supervisor team-builder calculator' 'supervisor karma calculator'; }
Now centre
supervisor
andcalculator
vertically:.supervisor, .calculator { align-self: center; }
And that's it. 🙂
Marked as helpful1@ddaniel27Posted over 3 years ago@jmnyarega Thanks for your feedback, I really appreciate it. I didn't know about grid areas. I'll take your tips in count next time! :)
1 - You are on the right path, you can use
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