Solution with flexbox and grid layout and CSS custom properties
Design comparison
Solution retrospective
Thanks to the comments and looking at some other solutions, I was happy with my revised grid solution that takes advantage of the grid-auto-flow
and the grid
shorthand to position the cards correctly.
If anyone knows how to get the top borders of each of the cards to have a straight edge rather than curved that would be helpful.
Community feedback
- @xphstosPosted 3 months ago
Nice work! Great effort overall!
I just want to clarify that there's no "wrong" way to approach things, especially when it comes to CSS. It's rare for a CSS solution that visually matches the design to be considered incorrect.
That said, one thing you might want to consider is using grid in your
.layout-grid
element.Here's a tip: You can create a 3x2 grid where the first and last cards span across 2 rows on desktop. This way, you won't need the 3
.col
elements.Marked as helpful1@elisilkPosted 3 months ago@xphstos, thank you 🙏 for the great suggestion and looking at the code so carefully. I implemented what you suggested and got rid of the
.col
divs. I think the solution is much cleaner this way. I appreciate it.1@xphstosPosted 3 months ago@elisilk Glad I could help. Grid a bit tricky but once you get the grasp of it, the possibilities are endless.
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