Used CSS grids for desktop and tablet, then flexbox for mobile
Design comparison
Solution retrospective
I had issues with making the grids fully responsive for tablet and mobile. For some reason i couldn't get the rows to auto fit. They would just stick to 2 columns and the 2nd column would just shrink while the 1st column would stay in the min width.
I resorted to switching to flexbox to get the mobile right.
If you see a way i could have done it better with grids, please let me know
Community feedback
- @PeresvetIvanPosted over 4 years ago
Hey DPSumner! I don't understand what the problem with tablet resolution, i thought everything was working fine. I tried disabling all grid-related styles in the parent container (". grid") and in the block for cards ('. card'), for the '.grid' block I only wrote 'grid-template-rows: 1fr', and everything works fine in mobile resolution. I think that to work in the tablet resolution, you just need to write for the 'grid-template-rows' property ':repeat(2, 1fr)'and it should work. I hope you will succeed :)
1@Sumner-DavidPosted over 4 years ago@PeresvetIvan Thanks alot for your feedback. I'm still relatively new to css grids so this kind of advice does help!
0
Please log in to post a comment
Log in with GitHub
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