Testimonial Page using CSS Grid

Solution retrospective
Best practices to learn CSS Grid better?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @correlucas
👾Hello Benn, congratulations for your new solution!
I know how hard is to setup this
grid layout
, but I can tell that you've paid a lot of attention for each detail. Here's some tips:1.You did a really good work here putting everything together, something you can improve its your code html markup and semantics. You can replace the
<div>
that wraps each card with<article>
you can wrap the paragraph with the quote with the tag<blockquote>
this way you'll wrap each block of element with the best tag in this situation.2.Align your component to the screen center using
min-height: 100vh
and flexbox to make the component align to the body height size:@media (min-width: 1120px) body { min-height: 100vh; margin: 0; padding: 8em; display: flex; align-items: center; justify-content: center; }
✌️ I hope this helps you and happy coding!
Marked as helpful - @tiago-jv0
Hello Benny, great job solving this challenge, about your question, i think that you could use grid-template-areas to help others understand better you layout organization, it is really helpful when you have to lay out a complex design, you can read more about this feature here : https://css-tricks.com/almanac/properties/g/grid-template-areas/
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