@Risclover
Posted
Hi! So in regards to using grid vs. flex, the more you get used to working with CSS, the more you'll have an instinct for which one to use. In general though, grid can be used for the overall presentation of the web page whilst flex box sets the layout within the components. In reality they are probably being used interchangeably by most developers.
The name grid should give you a hint - generally it's most useful when you need an actual grid. Flexbox is useful for a lot of other positioning techniques (like aligning arbitrary numbers of items or such)
(You can also use grid and flexbox together, eg. grid for main layout, and flexbox for positioning individual items inside your grid cells)
EDIT: In regards to this project specifically, I would use grid for the 4 boxes on the right side (Reaction, Memory, etc) because it's a literal 1x4 grid.
However, I would use flex for the elements inside of these boxes, specifically aligning them with align-items: center to make sure they're centered horizontally, and justify-content: space-between so that the icon and title are on one side and the number ratio is on the other.
The left side of the app (the side with the blue background), I'd personally use flex for that as well - flex-direction: column to make the elements vertical instead of horizontal, and justify-content: center to make them centered.
Let me know if you have any questions!
Marked as helpful
@nisimi96
Posted
@Risclover Hi Sara,
Thank you so much for the great tips! Your explanation of using grid and flexbox is really clear, and your advice for the project is super helpful.
It's good to know I can reach out if I have more questions, but I totally respect your privacy as well.
Thanks again, and have a wonderful day!
Best, Yuval
