title: Masonry unintended spacing below images until resizing
body: <p>I just started using masonry with imagesloaded and I'm having a strange issue. Everything is working as I intend except below each image there is about a 3px space that I do not want there, this space goes away once I resize the window. I have no idea what is causing this and any help would be great. I've tried removing the border and there is still a space.<a href="https://i.stack.imgur.com/X3XzN.jpg" rel="nofollow"><img src="https://i.stack.imgur.com/X3XzN.jpg" alt="enter image description here"></a></p>
  
  <p>CSS:</p>
  
  <pre><code>/* Masonry */
  * { 
      box-sizing: border-box; 
  }
  
  // Grid
  .grid {
      //background: #DDD;
  }
  
  // Clearfix
  .grid:after {
      content: '';
      display: block;
      clear: both;
  }
  
  // Grid Item
  .grid-sizer, .grid-item {
      width: 20%;
  }
  
  .grid-item {
      float: left;
      border: 5px solid $babyBlue;
  }
  
  .grid-item img {
      display: block;
      max-width: 100%;
  }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>// Enable Masonry
      var $grid = $('.grid').imagesLoaded( function() {
          // init Masonry after all images have loaded
          $grid.masonry({
              // set itemSelector so .grid-sizer is not used in layout
              itemSelector: '.grid-item',
              // use element for option
              columnWidth: '.grid-sizer',
              percentPosition: true
          });
      });
  </code></pre>