Skip to content
Submitted almost 3 years ago

Testimonials-Grid-Section using CSS Grid and Flex Box

Aviel Hernandez•80
@AvielDez
A solution to the Testimonials grid section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Can the CSS Grid method I used be dynamically implemented? The workflow I used works great for this challenge but I'm worried that this is a very static method for creating a Grid layout and cannot be used dynamically.

I placed a code snippit in the README.md file under the 'What I learned' section on github.

This was a great challenge for getting my hands dirty with CSS Grid. Grid is a great tool and I had to look at tutorials and do some external practice in order to wrap my head around using CSS grid. It's a very powerful tool and would recommend anyone to learn it as soon as possible.

I do feel like my HTML code could much cleaner and a lot tighter looking back. I could have implemented some CSS Custom Properties for colors and other general properties that span across the site as well.

Code

Please log in to post a comment

Log in

Community feedback

  • Lucas 👾•104,160
    @correlucas

    👾Hello Aviel, congratulations for your new solution!

    You did a good work here, nice grid layout.

    To Improve even more your solution you can replace the divs with semantic tags, for example the div holding all the content can replaced with <section> and the one that wraps which card with <article> and the one with the quote text with <blockquote>. Remember that div doesn't have any meaning are just block elements so for. Bigger blocks give ever semantic tags.

    Hope it helps, happy coding!

    👋 I hope this helps you and happy coding!

    Marked as helpful
  • Antoine C•1,240
    @mattari97

    Hi Aviel. I think you have all the knowledge you need to make the page fully responsive, you just need to implement more mediaqueries.

    Right now you use only one for 420px.

    You could use a repeat(2, 1fr) for 420px, then repeat(3, 1fr) and finally repeat(4, 1fr) like on your current design.

    You also change your grid-template property each time and that's it 😃.

    Happy coding. Peace

    Marked as helpful

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