Size of thumbnail:
Thumbnails will be generated according to image’s height and width ratio. let’s say you have an image of size 700 * 467, now if you set the width to 50px, it will generate image size in the ratio of 7:4.67 i.e. then thumbnail size will be 50 * 33 (7:4.67 ratio). It’s just re-sizing actual image so thumbnail won’t look different than the actual image.
It may create the gap between media as not all media uploaded will be of the same size.
Alternative custom code :
Set different width (in terms of %) for different blocks and then apply below code:
jQuery('.widget-item-listing').masonry({
itemSelector: '.rtmedia-list-item',
// set columnWidth a fraction of the container width
columnWidth: function( containerWidth ) {
return containerWidth / 3;
}
});
Note that here columnWidth is containerWidth / 3 because width is set in terms of % which is 33%. If you want 4 column layout than set width 25% and set columnWidth in above code to containerWidth / 4.