Skip to content
Submitted 6 months ago

Four card feature using CSS Grid Layout responsive

leodev•290
@hangtime319
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

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

In this project I learned a lot about grid layout. It seems like it's an easier layout to adjust than flexbox, but it's limited. I didn't have many difficulties applying responsiveness.

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

I found few difficulties applying grid layout. But next time I will use other grid layout resources so I don't need to use media queries.

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

Suggestions on how to simplify the grid layout.

Community feedback

  • DesignJunkie•370
    @cristi-20Posted 6 months ago

    Very good solution. I didn't think of this. Much more simple than doing it with grid-column or grid-row.

    1
  • davidmoreau2•140
    @davidmoreau2Posted 6 months ago

    Very clean layout. everything looks exactly as it should and i would not make any changes, excellent job. your html is very clean. I did not think to add the two cards in the middle as one div, very smart in my opinion. Build very well that you did not need a lot of code to make it smaller which i am envious of

    1
  • Martín Beltrán•260
    @JMBeltranDevPosted 6 months ago

    It seems like a good solution to me.

    1

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