How to create Masonry grid with elementor gallery widget?

0

You actually can turn your messy Elementor gallery to nice masonry grid gallery.

To do it add a section and insert elementor Gallery widget. and add the images. Set the images size. bigger it better but not too big.

Set the columns to 1 . Its very important.

Add a class to the gallery. In my case it is “my_gallery”.

Now we need to add our CSS. open your css editor. First of all we need to target all of our images. If we inspect the gallery we can see all images are warped with a div called “gallery-icon”. So lets add our class and css
.my_gallery .gallery-icon img{
width: 100%; padding: 7px;
}

Here the padding will be the space between the images. So set it as per your need.

Now we need to target the gallery holder. If we inspect element again we will see the ID of our gallery holder is “gallery-1” . If you add multiple gallery it may be gallery-2, gallery-3 etc. So lets go back to CSS editor and add some css to gallery-1 .
#gallery-1{
    column-count: 4;
    column-gap: 0;    
}

Here the column-count is the number of column you want.
column-gap: 0 to remove any unnecessary gap.

Lastly lets make the anchore tag “a” to “display:block”
.my_gallery .gallery-icon a{
    display: block
}
If you want to make it responsive set the number of column on mobile device in @media query
@media all and (max-width:767px){
  #gallery-1{
    column-count: 2;
     
}      
}
Here are the codes combined
.my_gallery .gallery-icon img{
    width: 100%; padding: 7px;
}
#gallery-1{
    column-count: 4;
    column-gap: 0;    
}
.my_gallery .gallery-icon a{
    display: block
}
@media all and (max-width:767px){
  #gallery-1{
    column-count: 2;
     
}      
}

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Leave a Reply

Close Menu
This website uses cookies to provide you with the best service. By using our website, you agree to use the cookie. Learn More