hi @sabanna
trying to achieve the masonry grid (3 columns) with dynamic content for my project but somehow it gets stuck at 2 columns. can you help?
here is the readonly link https://preview.webflow.com/preview/app-aggregator?utm_medium=preview_link&utm_source=designer&utm_content=app-aggregator&preview=d67c7172c389ea07e262254729182db8&mode=preview
Thanks
Nitesh
I understand the Masonry layout, on the web, is when items of an uneven size are laid out ⊠CSS grid is very amazing and useful in a CSS developerâs everyday life, but itâs ⊠Links in comments (at least in preview) look great on hover.
please click on this link: [broaching tools]
Hi, @Nitesh_Pathak!
From what I see on your project, you applied column settings to the CONTAINER.
Instead, you need to apply it to the app-collection-list, the parent that contains all your dynamic items. Then you will be able to correctly adjust all the settings.
Cheers,
Anna
Thanks, @sabanna it worked, alternatively, I also found out the number of items in the collection was only 5. as soon as I added one more to the collection it was divided equally among 3 columns.
Thanks again
Hi @sabanna,
Iâm trying to make my masonry grid work with Collection items but I canât seem to do it. The website is for an animation studio so I need the best projects to show up at the top. I numbered the projects to be able to sort them, but because it is sorting the items vertically it gets all jumbled up. I have tried to number them so that the âbestâ work shows up at the top (for instance numbering the best 1,5 and 8 to make them show up at the top) but of course that gets all jumbled up again on smaller screens with fewer columns or when I add a project. Do you know how I can fix this?
Here is my share link (Iâm referring to the work page):
https://preview.webflow.com/preview/saga-new?utm_medium=preview_link&utm_source=designer&utm_content=saga-new&preview=c3a4c50b2a620f350e3dfb5378b20351&pageId=5fe4abd13b1e0fde21d692b0&mode=preview
Hi @sabanna - can you share the jQuery please?
Hi,
Would this work with Multi Image Field from a CMS-item on a Collection Template Page?
My best, Daniel
Hi, @Daniel_Remes !
Yes, you can use it with the multi-image collection.
Hi, Thanks a lot for your answer. I manage to do it but seems to have an image hight problem where al the images doesnât display fully. nay idea why?
Hard to tell without seeing the actual page, but can definitely tell that you would want to make sure that each image has 100% width and auto height.
Could you please, provide a share/preview link to that page so I could take a look? Feel free to DM me here if you donât want to share it publicly
Hey these posts have been super helpful and have made a masonry grid!
I have a problem though⊠it is organizing from top to bottom column by column which is making it difficult to order the posts.
I used the text columns option to make the masonary grid.
Any advice would be much appreciated 
Hello @sabanna
Iâd like to build a masonry layout within a collection page. Each field would have a tile. Attached an image what it should look like: https://uploads-ssl.webflow.com/60be3a76e72a7c397e62f49c/62e8ff976641a4ae4fe140a6_KĂ©pernyĆfotĂł%202022-08-02%20-%2012.22.43.png
I tried it with grid, flexbox, and 2-3 javascript that should make it work, but usually it is optimized for collection lists.
The problem is the tiles wonât fill up the negative spaces.
Read-only link: https://preview.webflow.com/preview/mndwrk-com?utm_medium=preview_link&utm_source=desi[âŠ]207349a4fe&itemId=61432e42942bba08e149a7de&workflow=preview
Thank you in advance!
I just implemented this same feature on Memberstack cloneable component library (live demo).
This tutorial was the most helpful for my situation.
And here are all the other projects I looked at along the way. I hope this round-up saves you some timeđ€
CSS-based solutions (like the solution a the top) are great if you donât mind the orderâŠ
Javascript-based solutions are handy if you need items to appear in order (Left to right, line-break, etc.)
If youâre curious, the finished result looks like this. Iâm really happy with how it turned out.
Hi @sabanna , I have red all the comments and youâre very supporting, I hope you could also help me get rid of a problema I have. I created the vertical Masonry grid layout for a client of mine but they prefer to have the contents displayed from left to right because they want to order the items horizontally by themself in the future. How can I create an horizontal masonry grid? Using flexbox? I tried this last one but I canât get the best result.
Here is my share link: Webflow - Antonello & Montesi Photography
Thank you in advance!
Cheers!
Same problem for me here for a project of a client of mine, did you find any solution?
Cheers!
Hi sabanna!! Thanks for all the knowledge youâre sharing.
âWith using Flexbox you are able to control ordering vertical or horizontal. In some cases it may be important. But at the same time, it will require fixed height for masonry container.â
How can you achive an horizontal masonry like you said using flexbox? Because I am trying but my child elements donât arrive right at the end of the flexbox container.
I am stucked here. Could you please help me? Here is my link: Webflow - Antonello & Montesi Photography
Thank you!
