Masonry grid ( #Pinterest) in Webflow. Created by CSS only

Hello webflowers, my colleges, friends and amazing Webflow team!

First of all I want to say that by helping others I am learning a lot of new tricks, get new ideas and as result I keep educate myself :slight_smile: THANK YOU ALL! Happy Thanksgiving! :smiley:

I found and tested great example of creating Masonry grid by using CSS. Only issue it has - it will NOT work in Internet Explorer earlier that version 10. (But today we got a news that all that versions will not be supported by Microsoft anymore).

This grid can be used for show any content (images, divs, dynamic content, etc), it is responsive and all settings can be changed by you. Results will be visible in Designers mode in Webflow.

All you need is:

1) give ID to div (container, section) which will be Masonry container

2) add embed code to the page with this container

<style> 

#ID_of_your_container {
 -moz-column-count: 4;
 -moz-column-gap: 0px;
 -webkit-column-count: 4;
 -webkit-column-gap: 0px;
 column-count: 4;
 column-gap:0px;
}

@media (max-width: 991px){
  
#ID_of_your_container {
 -moz-column-count: 3;
 -moz-column-gap: 0px;
 -webkit-column-count: 3;
 -webkit-column-gap: 0px;
 column-count: 3;
 column-gap:0px;
}
  }

@media (max-width: 766px){
  
#ID_of_your_container{
 -moz-column-count: 2;
 -moz-column-gap: 0px;
 -webkit-column-count: 2;
 -webkit-column-gap: 0px;
 column-count: 2;
 column-gap:0px;
}
  }
@media (max-width: 480px){
  
#ID_of_your_container {
 -moz-column-count: 1;
 -moz-column-gap: 0px;
 -webkit-column-count: 1;
 -webkit-column-gap: 0px;
 column-count: 1;
 column-gap:0px;
}
  }

</style> 

In this case we will have 4 columns layout on desktop, 3 columns - on tablet, 2 columns - on landscape phone view, 1 column - portrait phone view. All this settings can be changed as you wish.



Leave example:

https://webflow.com/website/SAPDesign-sandbox (page Masonry grid Css)

Hope it will be useful :slight_smile: Enjoy

Regards,
Anna

12 Likes

Great job Anna!!! Thank you so much for sharing this!
Can have a lot of fun with this neat CSS trick. Excited to see what comes from it. :smile:

Waldo :smile:

1 Like

Always welcome Waldo :smiley: I was so exited when tried it and it works nice!

2 Likes

Thanks Anna this looks very cool, will have to check it out and play around with it. Different gallery options are something I want to specialize in.

Jeremy

1 Like

You are welcome :slight_smile: It is great if somebody else can test is out more. And hope it will work good.

Hi sabanna, I’ve tested it on my layout and it worked, thanks !
But I can’t make it visible on the designers mode (only in the published version).
Also when I resize my window to smaller sizes some unexpected gaps appear
and it doesn’t maintain neat as yours example.
Can you make the editable version of yours avaiable ?

Here is the website I’ve been working.
http://rnucci-design.webflow.io/

Thank you very much !

Hello @Ricardo_Nucci!

For be able to see all changes in the designer mode I added custom style part not inside the head tags but in the embed widget right to the page.

About “editable version” it is available. https://webflow.com/website/SAPDesign-sandbox
Page name - “Masonry Grid CSS”. Site also available for cloning.

For get raid of gap make dynamic element display: inline-block (it especially helps when you use 3 columns). Yet I would suggest make image “.thumbnail” width=100% - it will make them align perfectly.

Hope it helps.

Anna

Thank you very much @sabanna !

Now it works fine.

@sabanna you know if it’s possible something like this ?

With CSS method - no. Only jQuery plugin for that kind of “sorting”.
Lately, I also find a free plugin which seems can do random sorting: http://tiles-gallery.com/#demo

Hi @sabanna

I used the masonry layout for a blog page I created but I get a weird thing happening where one of the blog post images get separated from the post title and description. I was wondering if you know how I can fix it?

Hi, @shauncy

If you will set dynamic item (“blog-item-flex”) display: inline-block it will fix this issue.

Cheers,
Anna

2 Likes

Thank you @sabanna I totally missed that! So simple! It worked like a charm.

1 Like

I did not use any CSS just because it’s Webflow and I can :slight_smile:

Click on gallery or scroll a bit.

http://delmo-sports.webflow.io/events/wildwood-best-jersey-shore-triathlon

Thanks for the tip Sabanna !
I was trying to do it via FLEX but just ended up with those gaps or stretched images.

1 Like