Skip to content
Submitted 4 months ago

Four cards feature section using CSS Grid

Anh•400
@anhvu1012
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?

I am most proud that I managed to understand and use the CSS Grid :)

What challenges did you encounter, and how did you overcome them?

I didn't manage to implement the straight inner top left and top right border of the cards like the original design :(

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

How can I achieve the top left and right border just like the original design? Can someone please enlighten me? Thanks a bunch :)

Code

Please log in to post a comment

Log in

Community feedback

  • Lucas Silva•260
    @lucasfs022

    Great job! I have some tips that might help make your design closer to the original design.

    1. I would not set a min-width for the cards. When we resize the page, it breaks the responsiveness.

    2. Since the cards don't have min-width, I'd set a 2-column grid for tablet screen sizes (between 768px and 1024px) so the card's content won't be squished.

    3. About the top border, if you change the card's border-radius to 5px, it'll be closer to the original design.

    Overall, this is really well done project. Congrats.

    Marked as helpful

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