Testimonials-Grid-Section using CSS Grid and Flex Box
Design comparison
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
- @correlucasPosted about 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 helpful2 - @mattari97Posted about 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, thenrepeat(3, 1fr)
and finallyrepeat(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 helpful1
Please log in to post a comment
Log in with GitHubJoin 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