Masonry has spaces yet all cells have same width

Question

It's strange, masonry is missing big space and yet all li have the same width:

HTML:

<div class="one-gallery">
    <section class="grid-wrap">
        <ul class="one-grid">
            <li class="grid-sizer"></li><!-- for Masonry column width -->
            <li class="itemMG">
                <figure>
                    <img alt="Img 0 " src="images/1.jpg" >
                    <figcaption><h3> 0 Letterpress asymmetrical</h3><p>Chillwave hoodie ea gentrify aute sriracha consequat.</p></figcaption>
                </figure>
            </li>
            <li class="itemMG">
                <figure>
                    <img alt="Img 0 " src="images/2.jpg" >
                    <figcaption><h3> 1 Letterpress asymmetrical</h3><p>Chillwave hoodie ea gentrify aute sriracha consequat.</p></figcaption>
                </figure>
            </li>
        </ul>
    </section>
</div>

CSS:

.one-gallery ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.one-gallery figure {
    margin: 0;
}

.one-gallery figure img {
    display: block;
    width: 100%;
}
/* Grid style */
.grid-wrap {
    max-width: 1400px;
    margin: 0 auto;
}

.one-grid {
    margin: 0 auto;
}

.one-grid li {
    width: 24%;
    float: left;
    cursor: pointer;
}

.one-grid figure {
    padding: 15px;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

JS: Masonry is automagically launched. * Masonry PACKAGED v4.2.0

They all have the same width, so there shouldn't be any blank space. What can I do to fix it?

Answer 1

I think that You don't use imagesLoaded https://imagesloaded.desandro.com/ . So Your masonry layout is create before all images are loaded - and that's why You have this gaps.

function isotope_layout(){

    var $container_main_page = jQuery('.masonry_container');

    // MAIN CONTAINER

    $container_main_page.isotope({

        itemSelector: '.post_masonry',
        masonry: {
            layoutMode: 'fitColumns',
            gutter: 0
        },

    });

    $container_main_page.imagesLoaded( function() {

        $container_main_page.isotope('layout');

    });
}