Skip to content
Submitted 3 months ago

Testimonials grid section using Next.js, Sass, CSS Grid and Flex

chelsea-here•160
@chelsea-here
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Testimonials grid section
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

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

I would change the div with the avatar from grid to flex. I had to hardcode sizes for the grid. Any tips on how to make these more dynamic while still having different size areas?

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

I found the modifications to the individual cards challenging because I put the info in an array of objects and was mapping through them. I overcame this by using the nth selector.

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

Please see question on first response. Any suggestions on best practices are also appreciated. thanks!

Community feedback

  • markus•2,200
    @markuslewinPosted 3 months ago

    Hi!

    You could set grid-auto-columns: 1fr; to get columns of equal size. You could also switch the grid-auto-columns declaration for a grid-template-columns: repeat(4, 1fr); if you want to create an explicit grid instead.

    1

Please log in to post a comment

Log in with GitHub

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