DEMO

FULL Screen DEMO

Masonry is not filling small gaps even if there is space.

Example : Main Container width : 896px;

beside the first container with the orange background, there is a gap where Masonry could add one more container (Orange BG 2nd container), which is not happening. I'm not sure where I'm wrong. :-(

You need to maximize the window to see the issue.

JS :

jQuery(window).load(function() {
            /* var container = document.querySelector('.masonry-container');
            var msnry = new Masonry(container, {
                itemSelector: '.itemMas',
                columnWidth: 15,
                gutter: 1,
                isFitWidth: true
            }); 
             */
            $ = jQuery;
                var $container = $('.masonry-container').masonry();
                var msnry;
                $container.imagesLoaded( function(){
                    msnry = new Masonry( $container[0], {
                        itemSelector : '.itemMas',

                        isAnimated: true,
                        isFitWidth: true
                    });
                })
         }); 

DEMO

FULL Screen DEMO

Masonry is not filling small gaps even if there is space.

Example : Main Container width : 896px;

beside the first container with the orange background, there is a gap where Masonry could add one more container (Orange BG 2nd container), which is not happening. I'm not sure where I'm wrong. :-(

You need to maximize the window to see the issue.

JS :

jQuery(window).load(function() {
            /* var container = document.querySelector('.masonry-container');
            var msnry = new Masonry(container, {
                itemSelector: '.itemMas',
                columnWidth: 15,
                gutter: 1,
                isFitWidth: true
            }); 
             */
            $ = jQuery;
                var $container = $('.masonry-container').masonry();
                var msnry;
                $container.imagesLoaded( function(){
                    msnry = new Masonry( $container[0], {
                        itemSelector : '.itemMas',

                        isAnimated: true,
                        isFitWidth: true
                    });
                })
         }); 

• javascript
• jquery
• jquery-masonry
• masonry

2 Answers 2

Masonry will not change the order of the elements in the document. It simply packs elements left-to-right as tightly as it can.

If you need to pack items by rearranging their layout, you want to use another library, such as Isotope (made by the same author). It features a bin-packing mode in which items can be rearranged to fit gaps.

Thanks for reporting this issue. This is how Masonry works. It may leave gaps. You should look at Packery, which was specifically designed to fill gaps.