Hahaha! Webflow magic
I looked in this but I don’t see how it was accomplished.
You girl are awesome
Can you share your read-only link?
Here it is:
https://preview.webflow.com/preview/opsrc-12471d?preview=213578e1124f4b9954760e08ffdaa7c4
Ok - I got the masonry grid but it doesn’t flow left to right, date goes by column. I don’t know if I like that. Is there a way to paginate my posts so I can make sure it’s fresh content in the grid? I have a million questions right now, I know. I also have a filter issue with the same site.
Awesome find! but I can’t get it to work can you explain a little bit more how to achieve that?
I tried putting various images inside a Div or Div’s inside that first Div but it doesn’t work and I get a strange cut on the images (div’s).
Thank you very much in advance.
Hi @aaronocampo,
For proper alignment, make items inside the “grid div” display: inline-block and make sure their width is 100%.
Try it and let me know if it fixed the problem.
Cheers,
Anna
EDIT: Made it Inline Block, as you mentioned in one post. Solved!
@sabanna Thank you so much
But there is one thing I cant solve
The ending of one block continues to next row,
see img
You know what Im doing wrong?
https://preview.webflow.com/preview/testings-ccae61?preview=086f8c863cc4142c7c63cd82ede3517f
Getting here a little late… If I could hug you through the interwebz @sabanna, I would! Thanks!
Hi @krubens,
what if you will put rich text block in wrapper div? I think in that way it has to count like one whole item, not a text.
you are welcome, glad that it become really useful stuff
All boxes are Divs, just hadn’t set them to inline block, that saved the day
Thank you again Sabana, YOU ROCK!! Worked like a charm.
For some reason it is not possible to integrate a webflow slider in the columns: when the slider is positioned after the first column the content (slides, left + right arrows, slide nav) doesn’t show up. I have been looking for a solution, but up till now I didn’t succeed. Any ideas?
Edit: It is an issue in Google Chrome mac, but not a problem in Safari or Firefox mac.
Readonly link of the raw material:
https://preview.webflow.com/preview/buro-tank?preview=ca77e59b29ee314383a796e13d7164e0
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:
http://kunal-jaura-photography-2739b6.webflow.io/
Please help!
Thanks so much,
Ruheene
Hi Sabanna
in your grid there is a flush bottom and top border.
How do you dynamically acceive this, my photos don’t align on the bottom.
thanks
Dylan
http://kusvisual.webflow.io/projects/portraits-of-david-esteban-rodriguez
Hello @Ruheene_Masand_Jaura,
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.
More details I can tell only with read-only link.
Cheers
Hi @Dylan_Flowers,
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.
This fixed it, thank you so much!