Newbie Responsive Page Complete using CSS Grid
Design comparison
Solution retrospective
This is my third challenge completed using CSS Grid. Two of the sections had cards that needed to be positioned in a laddered/staggered manner. One with staggered columns and the other with staggered rows. Implicit Grid kicked in at one point when I commented out my solution, and it worked fine! You know when you solve a problem and you do not know how you did it? That is the way it was for me creating multiple rows. Not sure if it done in a best practice fashion but it works. If anyone can have a look at the two sections using Grid that would be great. Also, all the work over the last dozen projects to create effective README's is paying off, does not take long now, and I find writing them beneficial as it solidifies some of what I have learned in the project.
Community feedback
- @danielmrz-devPosted 12 months ago
Hello John!
Your project looks nice!
Those laddered/staggered cards are quite a challenge right?
I have one suggestion for you to improve your project:
You can place your
main
in the middle of the page by doing this:body { height: 100vh; display: flex; justify-content: center; align-items: center; }
In order to work, you have to remove
min-height: 100vh;
from yourcontainer
because this makes that scrollbar appear. But it's not necessary because this project is supposed to fit inside a desktop screen.I hope it helps!
Other than that, my friend, you did a great job!
Marked as helpful0@John-Davidson-8Posted 12 months agoHey @danielmrz-dev thanks for that, much appreciated. Will get to work on it tomorrow.
1
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