Hello,
I’m trying to figure out a particular layout for displaying images on my website as illustrated here:
My problem is that instead of the image pairs to shrink together, they jump and stack underneath each other. I think there might be a way with some flex and shrink properties but I haven’t managed to make it work. Does anyone have any idea how to make that work?
Thanks,
Alex.
Here is my site Read-Only: Webflow - First Lights Design
Currently every image has the same class. I would put the images inside some divs so that you can style the layout properly. A 3 image grid or just grouping the smaller images into a div should work.
Hi Chris,
Thank you for y our reply. The problem with this solution is that it doesn’t work with CMS items, since every items in the list will have the same class and layout.
Hi Alex,
You’d need nth-child for this
Check this
Hi,
Thanks so much for this I think it might be a step in the right direction. With this technique though, you’d always have the same layout across each page right? so for example, 1-2-2-1
But my pages might be a bit more random, some are 1-2-1-2, some 1-1-1-1 etc. so it would be awesome to have a solution where I can just upload the images and webflow would see, "this picture is 1920px across, so 1-col, this picture is only 800 px so 2-col.
I hope that makes sense. But your solution might be a good compromise if I don’t manage through the shrink/wrap css
Hey,
Yes, you’d have the same layout. When you start adding items, it will maintain that grid layout. The new items will come on top. But you can always sort that too.
There’s another way you can play with the grid. You can set what every odd or even item would look like. And that would follow for the rest of the items.
See this vid for that: Unique Styles for Each Webflow Collection Item (nth child) - YouTube
But if you’re looking for Webflow to automatically adjust according to the image size, that’s a smart solution actually. Don’t know how is that possible. But I hope it is!
Anyone looking for an answer here, I really haven’t found one with image fields. What I did in the end was to create a rich text CMS that I filled with my images, some full width, others at 50%
