Streaming live at 10am (PST)

How to apply a masonry style to elements on a page


#1

Hello there,

Here's my shared link (the page "responsive box"): https://preview.webflow.com/preview/lw-test?preview=b9e926131191296af3aa479fec46226f

I want the same effect without putting minimal height, is it possible? See attached image.

What i want:

What i have:

Thanks in advance :slightly_smiling:


#2

Hi @Ozaroth

I think what they did in the screenshot, is that they had the height on the wrapper to auto so that only the content that's inside of the wrapper can define the height. So the more content you put in the card the longer it will be. I think that's a pretty cool way of making the cards have a sort of "random" size feel to it.


#3

Hello,

I've the height of the wrapper to auto it doesn't seems to work properly :confused:

See my link :slightly_smiling:


#4

You already have the effect you're looking for, you just need to add different content in the wrappers :wink:


#5

No, if i make 4 more under it make a big white space, they doesn't stuck to each others.


#6

I think he is actually wondering how to make it so that the content can be different heights but still fill the space ie a masonry layout:

One example:

This may also help:

Here is an example site using isotope
http://isotopelearning.webflow.io/

Other plugins: Nested, Mason.js, Cube Portfolio, Megafolio, Gridalicious, Woomark, Smart content placer, Freetile etc etc.

Here is an example using only css:
https://jsfiddle.net/gabrieleromanato/tQANc/


Replicate a responsive element/Masonry Effect
#7

I'm sorry I misunderstood. I believe @sabanna will be able to help :slightly_smiling:


#8

Hi @Ozaroth,

The effect that you are looking for calls "Masonry grid". There are 2 ways to make it:
1) Use jquery plugin
2) Use CSS columns

The first option would require some coding knowledge.

The second option can be done in Webflow with few clicks, here is tutorial:

Feel free to ask if you will need more explanation.

Regards,
Anna


#9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.