Design comparison
Solution retrospective
Best practices to learn CSS Grid better?
Community feedback
- @correlucasPosted about 2 years ago
👾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 helpful1 - @tiago-jv0Posted about 2 years ago
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 helpful0@dbenny1Posted about 2 years ago@tiago-jv0 Thanks alot. Still new to CSS Grid. I'm gonna try that out.
0
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