How to make a grid with packery with variable sized images and no white gaps at the end of each row

Question

I want to make a photo grid (currently using packery but open to sugeestions as to what is best to use) that that takes up the full width of its container with images that have an unknown variable size. My problem is that because the image widths vary - I am getting white gaps at the end of each row (the rows finish at uneven places) where a new photo/ grid item doesn't fit. This also happens on resize of the screen. Any suggestion on how to make these gaps disappear/get taken up with images?

I don't want to use fixed column widths, I have tried different options using background images instead of images but the images were too cropped.

check out my example on code pen https://codepen.io/hollyb/pen/JVEzYX

HTML below

<div class="home-page-wrap">

        <div class="page-content">

            <div class="grid packery">
                <canvas></canvas>
              <div class="grid-item"><img src="https://picsum.photos/200/300" alt=""></div>
              <div class="grid-item grid-item--width2"><img src="https://picsum.photos/300/300" alt=""></div>
              <div class="grid-item"><img src="https://picsum.photos/400/300" alt=""></div>
              <div class="grid-item"><img src="images/skinnyimage2.jpg" alt=""></div>
              <div class="grid-item grid-item--width2"><img src="https://picsum.photos/300/300" alt=""></div>
              <div class="grid-item"><img src="https://picsum.photos/220/300" alt=""></div>
               <div class="grid-item"><img src="ihttps://picsum.photos/100/300" alt=""></div>
              <div class="grid-item grid-item--width2"><img src="https://picsum.photos/450/300" alt=""></div>
              <div class="grid-item"><img src="https://picsum.photos/600/300" alt=""></div>
              <div class="grid-item"><img src="https://picsum.photos/200/300" alt=""></div>

            </div> <!-- end grid -->

        </div> <!-- end page content -->

    </div> <!-- end page wrap -->


<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/packery@2/dist/packery.pkgd.js"></script>

.home-page-wrap {
  max-width: 1000px;
  margin: auto;
}

.grid-item {
    box-sizing: border-box;
    max-height: 300px;

}

img{
        max-height: 300px;

    }

I want both sides of my grid rows to finish at the same place / on the edge of an image with preferably the same amount if white space between them

Answer 1

Packery applies its own setting from the JS call. The JS call in your sample sets the gutter to 15 (pixels). For starters, this should be set to zero to do what you wish to do. I also recommend that you set percentPosition as well, as I think that is what you are trying to achieve.

Here is an example:

<script type='text/javascript'>
    $('.grid').imagesLoaded( function(){
        $('.grid').packery({
            itemSelector:'.grid-item',
            percentPosition:true,
            gutter:0
        });
    });
</script>

This should override any css grid-item{margin:X;} setting that you might have, though it would be wise to set margin:0;, just in case.

Hoping this helps you out.