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.
1 Like
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 
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
2 Likes
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
1 Like
Hi! How did you add the loading screen? Do you have a more in-depth post explaining this? Thank you!
1 Like
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!
1 Like
@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.
2 Likes
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
1 Like
You can adjust columns settings for each device view (media queries)
1 Like
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 
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
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.
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.
5 Likes
Or make the div inline block (see tip above from @sabanna )
1 Like
Hey @sabanna 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
*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