Design comparison
Solution retrospective
I found this really challenging in deciding when to use grid and when to use flex
What challenges did you encounter, and how did you overcome them?Mental blocks on all fronts with this one, found it really challenging and i am a little rusty.
What specific areas of your project would you like help with?i didn't write any media queries in the end. If someone can suggest what i could do i'd be grateful.
Community feedback
- @HexersePosted 4 months ago
Hello, I too am struggling with this one. But some insights I can give is
-
Use Rem instead of Px. It adapts to the screens better
-
Display flex has a function flex: 1. Which acts like grid where 1 in flex = 1fr in grid. U won't need to depend on using static numbers for some of your sizing as the flex will already do it for you
-
In my own opinion, usually I use grid to help layout my items I use grid-template-rows and grid-template-columns combined with grid-template-areas. To create the layout. Then use grid-area to assign the layout to my divs. For the smallers things usually I will use flex. As flex allows me to shift things within the box easier when it only has one dimension. E.g When all the elements are in a row. Or column format WITHIN the div.
Watch Kevin Powell and Slaying the dragon to know when to use grid and flex.
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