Responsive Card Section using HTML and CSS with both Grid and Flexbox

Solution retrospective
Gaining more and more experience in creating responsive solutions it was interesting to test a combination of flexbox (mobile view) and grid (desktop). Although I feel more comfortable using flexbox, this task has sort of opened my eyes for how grid can be used in specific scenarios, which is cool! I'm happy with how the overall solution turned out, successfully replicating the provided design :)
What challenges did you encounter, and how did you overcome them?I would say the main challenge for this task was figuring out how to best handle the layout of the cards in the desktop design. At first, I wrapped the second and third cards within a div so that I could simply use flexbox and align the elements centrally (essentially: card > wrapperdiv > card). However, this kind of felt like doing a "work-around" of the real challenge, as I thought the cards should all be equally "free", i.e. having the same direct parents etc. Thus, I figured Grid to be a better option, allowing for specific placement, while not having to put two of the cards within a wrapper.
What specific areas of your project would you like help with?Any feedback is welcome! I'm always looking to learn and understand different approaches to the given coding tasks :-)
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Petter Torst Saatvedt's solution.
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