Submitted about 11 hours ago

Four Card Feature Section | HTML5 Semantic & CSS Grid (Mobile-first)

pure-css

LVL 1

Jolita Audrey•66

@Jolitacode

A solution to the Four card feature section challenge

Preview Code

Solution retrospective

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

I am incredibly proud of finally mastering CSS Grid through this challenge! At first, the 4-card layout seemed tricky to align, but understanding how to use 'grid-template-columns' and 'grid-row' to create that specific "cross" shape was a real "aha!" moment for me. I’m also proud of using 'margin-top: auto' to perfectly align the icons at the bottom of each card, keeping the UI clean and consistent.

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

The main challenge was creating the "curated" grid layout on desktop. Aligning the four cards in a 3-column, 2-row structure where the first and last cards are centered vertically was trickier than it looked.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Jolita Audrey’s solution.

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