Streaming live at 10am (PST)

Webflow Masonry grid ( #Pinterest), no Custom Code required


#61

I would rather use Sabanna's solution mixed with a little JS just to fix that one detail than use a completely JS-based solution.


#62

is it possible to use this masonary style with say a dynamic list?

we have a site (nomad.pictures) which i'm trying to rebuild completely in webflow. i started today :slight_smile:

i used another theme as a base but before i start playing any more do you think i can recreate that staggered style from our site with webflow and your masonary style layout?

http://nomad-pictures-v2.webflow.io - i'm literally tinkering with it now :slight_smile:


#63

Hi, @teamhumble

Yes, it is absolutely possible. All you need is just apply columns settings to the Dynamic List. Then Dynamic Item should be 100% width

Hope it helps,
Anna


#64

Hi! How did you add the loading screen? Do you have a more in-depth post explaining this? Thank you!


#65

Hi Sabanna! is there any way that the information can upload horizontally rather than vertically? I would like my most recent photos to upload at the top of the page.

But thank you for this post, now this page doesn't have ugly gaps!


#66

@Kelly_Gowing @teamhumble and future readers,

Please keep this discussion thread focused on the tutorial (like how the tutorial can be improved, bugs or errors when implementing).

If you have a different use-case that the tutorial did not cover, please create a new linked thread to request for additional help, or private message the users separately.


#67

hmm.. the only problem with using this is when using mobile.. .

http://nomad-pictures-v2.webflow.io/

when i shrink down the view i still get 3/4 columns, i'd rather just have one picture that fits the width. any idea how i can do that. i tried to make the container flex and then the images inside of it but it never worked. any ideas?

thanks!
phil
--


#68

You can adjust columns settings for each device view (media queries)


#69

Hello @sabanna

I'm struggling a little bit when I add shadow to the elements inside the masonry container. Any ideas?

I have tried adding padding to and inside element, change to inline block and some other stuff but I can't figure out what I'm doing wrong.

Here is my preview link:
https://preview.webflow.com/preview/chloe-saltarelli-photography?preview=932ebb34c93aa05087e7fae08288113a

Thanks,


#70

Remove margin from linkMembership and use padding instead. Margins don't play well with columns. Add box-shadow to the child element (img).


#71

Didn't work :disappointed:


#72

Hello, @aaronocampo

For make that columns render content properly "masonry child" (linkMembership) has to have a settings display: inline-block. But with your content it pushing all of it into 2 columns only, probably because there is not much of it.

I was able to fix it by applying fixed height to the "masonry container" along with @samliew advice

If you are not planning to have more content there, then you don't really need that columns. If there is more content then add it and you will see it will render shadows properly.

Cheers,
Anna


#73

Thank you for the advice @sabanna. I'm going to leave that idea for now cause, like you said, there are no more links to add at this moment so maybe if the content grows I will change to masonry grid again.

Thanks a lot! to you and @samliew for the help.

Cheers,


split this topic #74

3 posts were split to a new topic: Photos at the top right flash when scrolling down


#75

Is there a chance of the horizontal flow of images being added to Webflow so we don't have to use the Masonry plugin?

Apologies if this is in the wrong section! I couldn't see where to post this directly to Webflow staff.

Thanks :slight_smile:


#76

I wrongly assumed this thread had closed. Can anyone help?


#77

Long time fan of this trick @sabanna!

Just found about another property that can help making clean grids.

There’s a way to prevent pieces of content to break between columns.

cv0ol

By using CSS break-inside:avoid you can prevent a complex element to break.

<style>
.dontbreak {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
</style>

Works for CMS Collection Lists too.


#78

Or make the div inline block (see tip above from @sabanna )


#80

Hey @sabanna :slight_smile: Thank you for this little workaround! I really like it! But please help me solving a mystery issue I’ve got when I set up sibling container to display: inline-block as you mentioned above:

Why is this trick affects the script I’ve got inside the container? I don’t see any related logic connection between making my container inline-block, and this weird behaviour from my tooltips. Also please note I don’t use overflow: hidden anywhere on those containers. If I set up the container to display: block the tooltips works as expected and as they always did, but then the problem with break between the columns arrives…* When you load the site they work flawlessly but after you click on the logo and site reloads again, the weird behaviour starts. Tested with iMac OS Mojave and Windows 10 with different resolutions and with latest Chrome installed on both.
Here is my read-only: https://preview.webflow.com/preview/ribolove?utm_source=ribolove&preview=8fac84003a90f36549ca574ad79e6ca2
and the staging site: removed due to confidential requirements

Any help will be highly appreciated. And sorry for digging so old topic from the ash :slight_smile:

*Edit: It turns out that not the display:inline-block nor display:block is the problem/solution but the columns itself… My custom interaction “on-hover-show-hidden-div” broke when I use this column settings… Any fix?


#81

Hello, @Spoonk!

I can see how frustrating and annoying this problem can be. I think I found the reason why this is happening.

The .scope element has a CSS transition applied on HOVER. I think this is messing up with the interactions (that controlled by JavaScript) and causing issues with rendering the tooltip element.

I would suggest removing any CSS transforms on hover state that you have now and create another hover interaction for the .scope element

P.S. I think changing box-shadow settings on hover is not affecting anything so you can keep it and only remove transforms.

Let me know if it helps.

Respectfully,
Anna