Skip to content
Submitted about 3 years ago

Responsive Four Feature Card Section Using CSS Grid

Gabriel Ayuba•270
@Tzienom
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello, folks. I used css grid and a position relative to get my cards in place for the desktop layout. Is that the best solution to it, and is there any other method to laying the cards out?

Secondly, the border color at the top of each card, is a 'before' pseudo class or border-top more appropriate? Thanks in advance.

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted about 3 years ago

    👋 Hi Gabriel!

    Regarding to your questions:

    1. In my opinion, using grid is the best option to create that layout and obviously there are many ways to create that layout. You can use flexbox, absolute positioning(not recommended), and etc.
    2. I used border top to create that and in my opinion, that's the best and easiest way to achieve that.

    That's it! Hopefully this answer your questions!

    Marked as helpful
    0
    Gabriel Ayuba•270
    @TzienomPosted about 3 years ago

    @vanzasetia Yeah, it does answer my questions. Thanks a lot. Really appreciated.

    0

Please log in to post a comment

Log in with GitHub

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