Design comparison
Solution retrospective
Revised Grid layout. Will improve the grid structure next time.
What challenges did you encounter, and how did you overcome them?Had some difficulties setting the contents of grid items while managing the widths of each grid item on different screen sizes while main div was centered. To avoid this, instead of centering the div, I added a translateY of dynamic viewport height which will push the div to some extent to make it look centered.
What specific areas of your project would you like help with?managing the content sizes while main div was centered and screen sizes were changing.
Community feedback
- @JomagenePosted 3 months ago
@r00kieAd
Congratulations on completing the challenge and crafting a responsive design that looks fantastic on both desktop and mobile views! 🎉
You're definitely on the right track. I noticed that you put in a lot of effort with the grid system, which is commendable. To elevate your grid system even further, consider simplifying it by letting the grid handle most of the layout automatically. This will allow you to focus more on the overall structure, only intervening where necessary. This approach will make your code cleaner, more maintainable, and easier to work with in the long run.
For example, you might try something like this:
.grid-container { grid-template-columns: repeat(4, 1fr); gap: 1.5625rem 1.875rem; .i1, .i4 { grid-column: span 2; } .i5 { grid-area: 1 / 4 / span 2; } }
This method elegantly simplifies the layout while keeping everything flexible and easy to adjust.
Keep up the great work, and remember, I'm here if you need any further guidance! Has this feedback been helpful to you? 😊
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