Build a layout with masonry-style?

Hi people!

Could this be done in Webflow?

I want to do a site with many sections and I thought about doing with 50% sections, but I don’t know how to stack them in mobile view?

Too ambitious? :wink:



Easy to realise with webflow you can use the Column option for it or just use % based div block and use the float option.

Very easy as stated above.

drop in a section - set height to what u want - drop in a column widget into that section - drop two divs into left column - give them 50% height each and drop image into right column - give that 100% height

then simply add your other sections below in the body still (so completely outside of your first section).


Thanks for the ideas guys!
This is what I have so far…

But the breakpoints are really fucked-up :confused:
I think I’m try out @OvertonGraphics method.


Almost there - give my idea a go - its what i’ve used for this so far - very early days yet - hence right looks odd but the sizings all working and is similar to yours - i’m gonna have the split heights on right and 100% div is on the left with the text

difference in in mine is i’m having the text box auto change height depending on amount of text in it

Getting there… getting there…

But somehow the top left image won’t scale with the rest?

Make the image on left a div instead with image as a background image set to cover. and div height 50%

make div underneath that 50% also - see if that helps (image might be too stretched, if so i have a workaround using this same idea so try this first and we can fix up left image after) :smile:

Arggh! Now I can’t get the background-images to show in both columns!

All divs are set with cover background image now… wrong?

can you paste your public editor link - press dashboard then the shar ebutton next to design button


Like this?

Grazie :smile:

Somehow I can only “color” the bottom div in left side (blue)

ok go through all the first few elements including body and give them all a height of 100% - including that section - that needs 100% too so give it a class name - and by 100% i mean in the height bit - not the height min bit - the input above min-height

ur image is perfect - remove the float eft and it’ll appear on the right again - so give both columns 100% and the section and the row and the body - all layers except ur 50% dives basically :slight_smile:

have u had a chance to do what i described? it worked perfectly for me. Thanks

Is this possible using the CMS dynamic lists?I can’t seem to figure it out.

Depend on what kind of dynamic elements you have. Just had some discussion in another topic (there is solution also):

Yeah, I’m in the same boat. It looks like the dynamic lists are in ‘columns’,but not in the same way as the column element. It looks like they are arranged in rows first, and then put into the columns, which makes content boxes with different heights not work.

@sabanna 's solution about works, but I’d be surprised if there’s not something in to works to give a better solution.