第三行之后的项目之间的边距

Question

我使用同位素v3和bootstrap 4建立投资组合。我不明白为什么我会在行之间得到如此奇怪的间距。再次单击过滤器“全部”或其他按钮时，该间距消失了

http://testrework.altervista.org/

<script>
         var $grid = $('.grid').isotope({
          layoutMode: 'masonry',
      itemSelector: '.grid-item',
      percentPosition: true,
  masonry: {
    // use element for option
    columnWidth: '.grid-sizer',

  },
        getSortData: {
          name: function (element) {
            return $(element).text();
          }
        }
      });
      $('.shuffle-button').on( 'click', function() {
  $grid.isotope('shuffle');
});

      $('.filter button').on("click", function () {
        var value = $(this).attr('data-name');
          $grid.isotope({
            filter: value
          });
        $('.filter button').removeClass('active');
        $(this).addClass('active');
      })
      $('.sort button').on("click", function () {
        var value = $(this).attr('data-name');
        $grid.isotope({
          sortBy: value
        });
        $('.sort button').removeClass('active');
        $(this).addClass('active');
      })


    </script>



.grid{

  background-color: blue;
}
  .grid-sizer,
  .grid-item { width: 20%; 


 }

这就是表格的格式

<div class="grid" >
    <div class="grid-sizer"></div>

    <div class="grid-item flower"><img src="img/portfolio/portfolio_01.jpg" class="img-fluid" alt="" srcset=""></div>
    <div class="grid-item bird"><img src="img/portfolio/portfolio_01.jpg" class="img-fluid" alt="" srcset=""></div>
    <div class="grid-item fruit"><img src="img/portfolio/portfolio_01.jpg" class="img-fluid" alt="" srcset=""></div>

</div>

所以看起来只有在我进行第三排时，才会发生这种情况，有人知道发生了什么吗？我过去使用的是同位素的旧版本，但现在有点迷失了：/