Responsive Four card

Solution retrospective
idk
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@jmnyarega
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 helpful - You are on the right path, you can use
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