Responsive layout using CSS grid

Solution retrospective
I'm proud of completing the project, was very difficult at first. I think what I would do differently for next time is starting with desktop-first design approach rather than mobile, especially if the layout is a complex grid. It's easier to get the complex components of the design out of the way, and then tweak for smaller screens.
What challenges did you encounter, and how did you overcome them?Originally, I horrendously adjusted the order of elements simply through grid-column-start/end and grid-row-start/end. After reading the W3Schools CSS Grid section, I recalled the grid-area and grid-template-areas properties. It was a lot easier to work with the grid in that way.
What specific areas of your project would you like help with?Sizing the desktop bento-grid so that it wouldn't be too big and require scrolling or zooming out from the user. I do think it's probably somewhere in my bent-grid-container class, and would need to adjust the grid-template-columns section.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on krru09's solution.
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