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 THANK YOU ALL! Happy Thanksgiving!
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 Enjoy
Regards,
Anna