Skip to content
Submitted about 1 month ago

Flexible Cards Layouts

Farid_Danilo•140
@FaridDanilo
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 proud to have achieved this new CSS Grid method to achieve flexible and unique web designs.

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

I faced the challenge of knowing how to correctly position the cards as requested in the desktop design. I tried several ways and none of them worked out the way I wanted. So, in order to solve this obstacle, I asked for help in the Discord community, specifying my stagnation on how to correctly position the cards.

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

I would like more help and support in learning and improving with CSS Grid, as it is something new for me and something new to learn and strengthen in my daily life.

Code

Please log in to post a comment

Log in

Community feedback

  • Harsh Kumar•3,910
    @thisisharsh7

    Hey👋, Great job on the project — the layout looks clean and the use of CSS Grid shows a strong start with modern layout techniques. Here's some constructive feedback:

    What you did well:

    • Nice use of CSS Grid to create an asymmetric layout — it reflects the desktop design well.
    • Consistent and well-named CSS custom properties, improving readability and reusability.

    Suggestions for improvement:

    1. Attribution Placement: On larger screens, the footer overlaps with the grid. Instead of using position: absolute, consider using a flex layout on the body:
       body {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
   }
   main {
     flex: 1;
   }

    This will push the footer to the bottom naturally without overlap.

    Overall, you're on a great path — keep exploring CSS Grid and don’t hesitate to experiment further. Well done! 💪

  • Mahmud Kabir Usman•80
    @Miranusm

    hello, youve done a greate job next time check the position of the card it is suppose to be the same, thank you

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