Design comparison
Solution retrospective
I'm proud of implementing a mobile-first approach. Moreover, my first grid project! next time I would like to approach the project with the cube methodology - I rewrite a lot of the same code.
What challenges did you encounter, and how did you overcome them?I had trouble making it the most responsive I can. I have an initial mobile view and desktop but the in between is messy. I sorta fixed it with grid template col.
What specific areas of your project would you like help with?If you have experience creating projects with the cube methodology, any tips on structuring my code to adhere to it would be appreciated :) but any help is appreciated!
Community feedback
- @SunilParbhooPosted 16 days ago
Nice job! I believe the auto-fit (in the
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));may be the cause of the cards with large amounts of text becoming super narrow and long when the page is between 555px to about 810px ). One thing to potentially improve your implementation is to add another media query around the 555px range where the cards tend to get really narrow and long, and create your own custom card layout utilizing the grid-template-areas such that the cards with large amounts of text continue to be tall enough to fit their content, and the cards that have less content can be smaller cards. For example:grid-template-areas: "Daniel Jonathan" "Daniel Jeanette" "Patrick Kira"Here, Daniel continues to be long enough to fit its text content, but since Jonathan and Jeanette have a lot of empty space, they can be condensed. I think you did a very good job for your first grid-project and wish you continued success on your coding journey.
Marked as helpful1
Please log in to post a comment
Log in with GitHub
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