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 helpful
