First off, thank you so much for all of this very useful info @sabanna! Very excited about using Webflow’s masonry grid feature.
Unfortunately it looks like I have the same issue that @krubens was having, and what fixed his issue doesn’t seem to be fixing mine. I’ve double checked to make sure everything inside my masonry div block is set to inline block with width = 100%, but I still seem to have this weird cutoff and flow issue from one column to the next:
From what I can see on published site, you create masonry grid from the div, which is wrapping dynamic list. I would suggest making grid from DYNAMIC LIST itself and DYNAMIC ITEMS would be masonry items with "display: inline-block settings.
With dynamic data, you can’t control this, unfortunately
If the gallery is static I usually simply reorder items so the whole gallery looks more aligned on the bottom.
Although your fix for overflowing/ cut off items worked with my existing dynamic lists last week, it doesn’t seem to be helping with my new dynamic list for some reason. If you wouldn’t mind taking a look at my read-only link (https://preview.webflow.com/preview/kunal-jaura-photography-2739b6?preview=0608a87453890219b821a5cf6cb3c7eb), you’ll see that I have 2 separate dynamic lists on my homepage. The very last picture in the middle column at the bottom of the page is getting cut off
My lists + items all have the same class applied to them, so I’m not really sure why the first dynamic list seems fixed and the second one doesn’t.
1st issue: The cards don’t align correctly. As you can see, the very last card on the bottom right should align in the 3rd column, but instead, it stays in the last one.
2nd issue: At the bottom of the main container, there are the shadows of each card, and I really don’t understand why.
This type of Masonry grid made by CSS columns feature. So the content of the container with this grid will be ordered by columns: from the left up corner, down to the end of the container then up to the next column, then down to the end of the container, etc, etc.
In your situation, the item from column#3 will not fit the free space at the end of column#2, and content at the top of column#4 will not fit space at the end of column#3.
You can make the container with the grid higher or rearrange the content.
Also, for do not get this weird shadows at the bottom of the container, give some top-padding to your items.
Thank you for your help, now I understand in a better way how this grid works. In fact, when I tried to resize the height of the container to 3000+ px, all the content shifted to the first two columns.
For the shadows, it worked out well, but with top-margin, not padding.
Thank you for this. I am able to create the mansonry effect using columns as you explained but wondering if there’s any benefit in doing this using Flexbox? Or if columns is the better way to go?
I tried to create it using Flexbox, but am not able to get the masonry effect. Can you take a look at this page?
To me, using columns for masonry grid is the easier (faster) method. But with this method your items will ordering vertically from first to last.
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.
