Submitted almost 4 years ago

Used CSS grids for desktop and tablet, then flexbox for mobile

David Sumner• 195

@Sumner-David

Preview site View code

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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

Ivan• 245

@PeresvetIvan

Posted almost 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 :)

David Sumner• 195

@Sumner-David

Posted almost 4 years ago

@PeresvetIvan Thanks alot for your feedback. I'm still relatively new to css grids so this kind of advice does help!

Please log in to post a comment

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