Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four cards grid

Saya 90

@SayaOvO

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I have learned how to use grid-template-areas

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

layout

Community feedback

P
Steven Stroud 4,100

@Stroudy

Posted

Amazing job with this! You’re making fantastic progress.

I noticed we're in a similar position with using CSS Grid for this layout. From reviewing different solutions, I've found that using a three-column, two-row grid structure works best. For the side elements, you can use transform: translateY(50%); to shift them down by 50%, aligning them perfectly between the rows.

While your current approach is effective, it does increase the width of the cards by about 19px. Though this isn't a significant issue, exploring the above method could offer a more precise solution. I hope this helps, and I appreciate your great work on this!

You’re doing fantastic! I hope this tip help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence! 🌟

Marked as helpful

0

Saya 90

@SayaOvO

Posted

@Stroudy Thank you! I will keep practicing! At this stage, I have decided not to focus on precise details.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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