Make CSS Grid Responsive
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi, I have a basic CSS grid that I'd like to make more responsive for tablet-sized devices and mobile devices. I've tinkered with it a lot but want to see what someone here might come up with. Here is my little Grid Test:

Acceptable Solution

I'd like to keep the max (desktop) width 2000px wide and keep as much, neatly, in the grid as possible as it scales down to smaller screens. For the smallest view, eg phones, the images may be hidden as things seem to get cluttered with those fast. I'd be willing to pay further for tweaks and such. This is more or less a learning exercise. Please let me know if I can add anything that'll help lead to a solution. Thanks.

awarded to chesedo

Crowdsource coding tasks.

1 Solution

Winning solution

This is what I came up with ->

Some of the middle widths still feel a bit cluttered, but the images are located at the end. I also tried to keep the sidebar 5fr across all sizes.

Love it. Thank you, I appreciate your help.
sharper over 1 year ago