Skip to content
Submitted 20 days ago

Responsive card layout using CSS Grid, Flexbox, and semantic HTML

Diego•50
@diegobezerra80
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 of successfully implementing a fully responsive layout using both CSS Grid and Flexbox, which ensures the feature cards look great on all screen sizes. Next time, I would spend more time optimizing the typography and spacing with CSS clamp() and logical properties to better support different languages and text sizes from the start.

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

One challenge was balancing the use of CSS Grid and Flexbox together to achieve a clean and flexible layout without redundancy.

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

Any suggestions on advanced CSS techniques for responsive typography and layout flexibility would be very helpful.

Code

Please log in to post a comment

Log in

Community feedback

  • Gavin•360
    @DesignAssembly

    All in all a good solid effort, well done. Good use of grid and flex box, some small things is obviously getting the top headline and sub text to be same size as in design. in your 2nd and 3rd nth-child you could add: place-self: end; and place-self: start to close the center gap and get your gaps consistent. the border at the top has a curve obviously following, the radius. If your really want to be pedantic and fix little nuances like these might be better to add in a span for the color-bar with overflow: clip on the card.

    Other than that well done mate!!

  • Julian Balaguera•160
    @julianchoripan

    very nice!

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