Skip to content
Submitted over 1 year ago

Solution with flexbox and grid layout and CSS custom properties

bem
P
Eli Silk•880
@elisilk
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • Chris Psilocybin•1,185
    @xphstos

    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
  • Lackevil•130
    @Lackevil

    You have greate vision!

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