Problem with responsive image layout
Hi everyone,
I’ve attached 2 pictures from a larger landing page that looks like a blog post. I’m coding this with vanilla CSS and I’m having trouble with the image layout.
Here’s what I want:
On large screens: 4 columns
As the screen gets smaller: columns should reduce naturally
On the smallest screens: still keep 2 columns (never drop to 1)
The problem is that when I use Flex or Grid, the layout breaks into a single column on small screens. If I try to force 2 columns, it often causes overflow and a horizontal scrollbar.
Do you have any suggestions for achieving this? Ideally, I’d like to do it without breakpoints if possible.
Thanks in advance!
3 Replies
What have you tried so far? What hasn't worked? Do you have a codepen or other shareable version of your code?
Though I'm pretty sure if you want it to be at least 2 columns you'll need one breakpoint. Basic grid/flex doesn't have the fine detail to do that.
Check out Kevin's video here: https://www.youtube.com/watch?v=scaiYZISGpk
I tried some variants of this in the following post where you can see some codepens of the results: https://discord.com/channels/436251713830125568/1410993294472908811
Kevin Powell
YouTube
Grid auto-fit, but with even number of columns only
Grid's auto-fit is awesome, but it can do more than I initially realized! If you add more grid tracks, they get included in the columns that are being made, which means you can enforce having even numbers of columns if you need to.
#css #grid #tipsandtricks
Thanks
Thanks, I found out that the overflow problem was caused by something else.