Hello there.
So I thought what I wanted to do, would be quite simple, but apparently it’s not, or I’m just terrible at searching for the relevant information…
Basically what’s happening is: on the desktop breakpoint, I have a little ‘gallery’ using CSS Grid with 3 columns. What I would like to happen is, as the viewport shrinks, I would like for the number of columns to adjust, so that the images don’t go out of view of the viewport.
I can easily go to the next smaller breakpoint, the tablet one, and just change that to one column. But that doesn’t help me in the desktop viewport, when incrementally shrinking the viewport until the images go out of frame. I would love for them to simply go down to 2 columns, and then 1, as needed.
I’ve tried deleting two rows, just making it ONE row, and then using ‘auto-fit’. But then the gallery images just start to overlap each other as the screen shrinks.
What I thought the answer would be, would be to set a ‘custom breakpoint’, at for example 1600 px, where you could define exactly when it should switch to 2 columns, and lastly one column.
And I’ve now spent maybe 3 hours on this, playing around with everything I can think of, watching videos on grid in Webflow, and it’s always about just clicking on the tablet breakpoint, adjusting it, and boom you’re done. But that doesn’t solve shrinking the viewport on the desktop breakpoint down to something around 1600 px wide.
Any help would be greatly appreciated!
Here is my site Read-Only: Webflow - Strange Island Creative
