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

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,

1 Like

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

1 Like

Didn’t work :disappointed:

1 Like

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

3 Likes

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,

2 Likes

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

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:

1 Like

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

1 Like

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.

4 Likes

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

1 Like

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?

1 Like

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

2 Likes

Dear @sabanna, thanks a ton for this solution! Definitely works! Just even if I create another hover interaction for the .scope class it starts act weird again, so I simply quit of this hover animation :smiley:
Otherwise this is the solution but I simply can’t explain to myself why this happens and what has the column to do with JS interactions?
Anyway thanks again! Really appreciated! :slight_smile:

2 Likes

Here is an jquery option: Maintain left-to-right order · Issue #873 · desandro/masonry · GitHub

1 Like

Hi @sabanna, thanks for this!

I’ve managed to implement, but I’m having an issue when publishing. I get column gaps AFTER the first item in each column. It doesn’t show in Webflow preview though, only on the published site. It renders fine for IE - LOL. See the pink gaps below:

image

It’s on the Recent Work page.

Any help would be great as I can’t find a fix.

Share: Webflow - Get Set Design

1 Like

Hello, @Nic1!

You applied columns settings to the Collection list WRAP, but you need it on the Collection LIST

1 Like

Hello @sabanna, Thanks for coming back so quickly. I’ve changed it, but the effect is the same :thinking:

1 Like

Ok, I see that your Collection Item has width set to auto. It means that it will only take the width needed to fit the content. If you change width to 100% instead it will always will the gap.

1 Like

Aha, thanks Anna! All fixed.

2 Likes

Anna thank you so much! If you are interested what I used it for: https://preview.webflow.com/preview/ms-cars-executive-travel?utm_medium=preview_link&utm_source=designer&utm_content=ms-cars-executive-travel&preview=408b35933485da3bbaa20d8f72422b55&pageId=5d1e562dbb9c4fc191b3d8ce&mode=preview

2 Likes