Is this layout possible in Webflow?

Hi,
Is this layout possible in Webflow? The images and text are linked to the Webflow CMS.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Short answer… yes.

2 Likes

Haha well that’s good to know! So far I’ve been unable to do it and so presumed it wasn’t possible… :frowning:

Others have also offered solutions which so far haven’t quite achieved the desired output… Match parent/children dimensions to that of specific child

Would you be so kind as to explain how it might be done?

I would much appreciate it!

Here’s the read-only:

https://preview.webflow.com/preview/louiss-groovy-project-2f0-c9dd58bd53594?utm_medium=preview_link&utm_source=designer&utm_content=louiss-groovy-project-2f0-c9dd58bd53594&preview=fcd9b75c55f7f7d2cccffdc0388a51f2&mode=preview

Took a look at your preview. Just make the Collection List Wrapper flex, then set a fixed percentage width for the Collection Item (50% for two items per “line”, 33,33% for three items, 25% for four etc) and make it wrap (in the flex options). Images stay inside the Item div with the correct aspect ratio.

Here’s how it looks (I added some padding on the Collection Item div too)


@Fonsume
Thanks very much for your reply - apologies for the delayed response!

Yes this is another option, thanks very much! Unfortunately, it’s still not really what I’m after ! ://///

You see, the containers for CMS items are all uniform in shape and size. Here is what I’m looking for:

Here the containers are varied in shape and size, which makes it more interesting visually.

What do you reckon? Is this doable? I think in Webflow it’s not but am not 100% sure still.

Cheers!

I don’t really see how, but you could just add a few lines with different amounts in each? Like one with four, one with five, one with three etc.

The saga continues…

One solution I suggest is to use Divs for each element and format the Height of those Divs. This would force it’s contents to stay within those constraints. Not ideal, but one solution. Don’t forget to turn off Overflow and adjust the padding for each Div. I think Columns would be a better base rather than a Grid.