Responsive page using CSS grid as well as flexbox

Solution retrospective
I'm proud of the fact that I learned how to use Grid
What challenges did you encounter, and how did you overcome them?It was challenging when I tried to use grid to arrange the 5th card by the side(desktop view). While trying to sleep, an idea popped up. To separate the the first for cards from the fifth card, make their container display flex then display the first 4 in Grid.
What specific areas of your project would you like help with?Any advice for how i can improve with Grid?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @HassanArafa-dev
Hi i hope you're doing well, please go ahead and watch Kevin's video about grid, he'll be building that exact same page, you'll learn alot about grid and do so much better if you try and build that page again without using flex.
https://www.youtube.com/watch?v=rg7Fvvl3taU&t=442s
Marked as helpful - @ephraimdjeket
Hi Obiwumma. Really good job on this challenge. To be able to use grid on the 5th card, you'll need to understand how grid works properly. That way you can create your own grid and position each grid element however you want.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout
Marked as helpful - @VADER900000
hi so the design is good for mobile but for the desktop i dont understand why the last card isnt a part of the css grid and is a flex element with the rest of the grid as a flex element why didnt u just make the grid bigger and have the 5th card span from the top to the bottom using the css grid
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