Submitted 9 months ago

Solution with flexbox and grid layout and CSS custom properties

Eli Silk•660

@elisilk

Preview site View code

This is a solution for...Four card feature section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

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.

What specific areas of your project would you like help with?

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

Chris Psilocybin•1,185
@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 helpful
1
Eli Silk•660
@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
Chris Psilocybin•1,185
@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
Lackevil•110
@LackevilPosted 3 months ago
You have greate vision!
0

Please log in to post a comment

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