Solution made with Flexbox and mobile first

Solution retrospective
I finished this one and it was quite a challenge.
I used flexbox, but in desktop view I don't think is the more elegant solution. I tried grid also, but no success.
If anybody can get me a hint I would appreciate it. Or any feedback on whatever improvements I could make.
Best regards!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @bramuccci
Hi! For me your solution sees great with flex (maybe I would the media querie to a lower min value) but as you say, maybe it's more elegant with grid because the use of that extra div. I got this way: first, remove that div
.cards{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; } .card__supervisor { grid-row: 1/3; } .card__calculator { grid-column: 2/3; } .card__karma { grid-column: 3/4; grid-row: 1/3; }
Feel free to try it! Your solution is great and I hope this help you :D
Marked as helpful - @seekinfox
I'll tell you what I did -> I'll keep the code minimum, since I'm writing this from mobile.
This is mobile first approach
<main> //. column flex <div.container> <div.cards> //column flex and @media min width 1000px flex row .card1 <div.middle-cards> //column flex .card2 .card3 </div> .card4 </div> </div> </main>
For a better idea you can check out my code for this challenge.
Marked as helpful
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