Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Solution with flexbox and grid layout and CSS custom properties

P
Eli Silk 240

@elisilk

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@xphstos

Posted

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

P
Eli Silk 240

@elisilk

Posted

@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

@xphstos

Posted

@elisilk Glad I could help. Grid a bit tricky but once you get the grasp of it, the possibilities are endless.

0
Lackevil 80

@Lackevil

Posted

You have greate vision!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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