Skip to content
Submitted over 2 years ago

Testimonials-Grid-Section using CSS Grid and Flex Box

Aviel Hernandez•80
@AvielDez
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

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.

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    👾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
    2
  • Antoine C•1,210
    @mattari97Posted over 2 years ago

    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
    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