Streaming live at 10am (PST)

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


#21

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


#22

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


#23

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


#24

Hi @Dylan_Flowers,

With dynamic data, you can't control this, unfortunately :frowning:
If the gallery is static I usually simply reorder items so the whole gallery looks more aligned on the bottom.


#25

This fixed it, thank you so much! :smile:


#26

Hi @sabanna,

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 :frowning:

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.

Thanks for any insight you might have!

Ruheene


#27

Sorry, I think that link in my previous post might be broken. Here's a new read-only link:

https://preview.webflow.com/preview/kunal-jaura-photography-2739b6?preview=03398e161e2bcfdade8fd164006a7890


#28

Hi @Ruheene_Masand_Jaura

I removed "float: left" settings from all elements in the second dynamic list and everything got fixed. Seems it was the reason.


#29

Hi @sabanna ,

I really love this trick because it's super easy and it works, but I have found a couple issues in my design.

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.

Thank you for the help,
Matteo


#30

Hi @MatteoDC,

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.

Regards,
Anna


#31

Hello,

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.

Thanks again,
Happy Easter!

Matteo.


#32

Hi Matteo.

Sure it should be margin, not padding. Sorry, my bad.

About the grid container: yesterday I tried height about 130 - 135 % amd it was looking pretty good.

Cheers,
Anna


#33

Thank you for this it's exactly what I was looking for! I finally solved what took me hours of struggle. :smiley:


#34

Hi @sabanna,

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?

http://cravings-fixed.webflow.io/traveling

Many thanks,
Celia


#35

Hello, @findyourcraving

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.

So all depends on what you need.

Cheers,
Anna


#36

Hi!
I'm nearly there with my grid but I'm having a hard time with the spacing:
https://preview.webflow.com/preview/trystudio?preview=943e665edec3d3e5841bd9ab2e6a5998

The image on the right isn't top aligned and I can't figure out why.

Any ideas?

Thank you!!


#37

Make Dynamic item ("InspiredCard") display: inline-block. It should fix.

Cheers,
Anna


#38

YES!
Thank you thank you thank you!:clap:


#39

I am not understanding what the first step is. How do I add a grid container??


#40

Just drag and drop Div or Container from the elements pannel.