Skip to content
Submitted 7 months ago

Four Card Feature Section with CSS Grid and Flexbox

Adam•340
@nadam-design
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 used the grid-template-areas. I think it could have been done purely with flexbox as well, but in this case, grid is easier, more painless, and requires less code.

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

The biggest challenge was responsiveness: I wanted to solve it without using media queries, but in the end, adding a few extra lines of CSS resulted in a good outcome.

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

Is it possible to achieve this with CSS Grid without using grid-template-areas?

Code

Please log in to post a comment

Log in

Community feedback

  • P
    pankajb085•290
    @pankajb085

    I Liked the solution so much. Got to know so many things from your code. Kindly give me some suggestions. My code - https://github.com/pankajb085/FrontendMentorChallenges/tree/main/Four%20Card

    Preview - https://pankajb085.github.io/FrontendMentorChallenges/Four%20Card/

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