Design comparison
Solution retrospective
i am learning every day new thing can't lie its was so difficult but we manage to finish it
i added couple animation to desktop screen and some animation to the mobile screen so this is something you have to check out
What challenges did you encounter, and how did you overcome them?position was one of my problem cause i have don't different positioning method and got stuck on the media views and couldn't make it work so i went through the position lessons again and had to understand the different between grid and flex
What specific areas of your project would you like help with?grids and flex to know better the using of both and know when i want to use one over the other
Community feedback
- @RiscloverPosted 4 months ago
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, andjustify-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, andjustify-content: center
to make them centered.Let me know if you have any questions!
Marked as helpful0@nisimi96Posted 4 months ago@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
0
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