Responsive image grid of variable size images

Design help General
1

Hi Everyone!

I’m looking for some design help making a grid of images from the CMS, which have variable sizes, responsive.

You can see on this site here: https://www.deadendthrills.com/random/ what I am trying to do. Some images are taller/wider than others, but the row height is broadly consistent and the row width is always the same & with the same spacing.

At different screen sizes, some images within a row wrap down to the next, but the row width and spacing is consistent.

So far I’ve tried using Grid and Flexbox to create this.

Here: https://i.gyazo.com/1b38a529c4a794469db019ba723d09e8.mp4 you can see what happens when I use Flexbox with wrapping. I can get the images and their respective div block that contains the information the conform to the row height and wrap down to the next row. But there are gaps on the right hand side.

Here: https://i.gyazo.com/a73ef3cc31963d877b75d0caa53dd64b.mp4 and on my site link you can see what happens when I use Grid. I lose the row height consistency as the structure of the grid is dependent on the image height. However, I can keep the wrapping by setting grid width on different screens and this also fixes the issue of the space on the right by using grid.

Is there a way to replicate what has been done on the DET site? Keeping the row width and wrapping, but also keeping the row height consistent? I hope to use this site as a sort of Archive/Portfolio for my images, which I’d upload to the CMS, without needing to manually design them on the page every time.

My initial thought was that this would not be possible using Grid, as this essentially needs to ‘break’ columns to fill the row with the correct width images.

On my site link, you can view the Flexbox tests I’ve done by adding the “flexbox test” class to “Collection Grid/Flex”.

Thank you for any help! and good luck with your own sites!

Jack

Here is my site Read-Only: https://preview.webflow.com/preview/aop-86a9bb?utm_medium=preview_link&utm_source=designer&utm_content=aop-86a9bb&preview=519bfca0adc872420e1c58bfd273e469&mode=preview

2

Hey Jack,
I’m making my own portfolio site and have a similar issue with my project thumbnails. My concern is focused more on image quality vs. responsiveness. So, when the page resizes, the images scale but don’t lose quality.

Anyway – I think I figured out a way to solve your problem. Is this what you’re trying to do? Screen capture - e5a4ba57b126c2639b9d5f862696797e - Gyazo

If so, here are the settings I used. I can explain the thought/process if you’d like.
Screen Shot 2021-03-24 at 10.59.09 PM Screen Shot 2021-03-24 at 10.59.56 PM Screen Shot 2021-03-24 at 11.00.09 PM Screen Shot 2021-03-24 at 11.00.20 PM

Hope this helps :v:

Kelsey

3

Hey Kelsey,

Thanks so much for your help. Using cover almost gets there, unfortunately, my priority is to show the full image.

I think I may have to leave out the images that are weird sizes from my site for this to work without code. I spoke with my friend and he said that to have the images both respond to viewport width and maintain their varied size (and therefore varied column), I’d need a JavaScript Listener or something like that. He also noted that the DET site seemed to use one.

I’ll see if anyone on Custom Code has a simple fix, then if not stick to the same size images for the time-being.

Cheers :v:

Jack

4

Hey Jack,
I was going through some other forum questions and I ran across this. Maybe you’ve seen it already, but if not…

CMS Gallery Custom Layout Grid - Multi image field