How to make friends bootstrap grid and Masonry.js?

Question

HTML

Good day, please tell me when creating a col-md-4 col-md-8 grid and applying Masonry to it, it works well. But as soon as we add {gutter:10} padding, the grid floats, i.e. the div is moved to the next line.

<div class="container">
        <div class="row">
    <div class="masonry-container">
          <div class="col-md-4 item"><img src="img/1.jpg" alt="alt"></div>
          <div class="col-md-8 item "><img src="img/3.jpg" alt="alt"></div>
          <div class="col-md-4 item "><img src="img/1.jpg" alt="alt"></div>					
          
        </div>
      </div>
    </div>

.item {
  height: 250px;
}

.item img {
  width: 100%;
  transition: transform 2s;
}

var $container=$(".masonry-container");
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector:".item",
    columnWidth: ".item", 
                gutter:10
               


  })
});
$('.item').imagefill()

Answer 1

Add padding (with box-sizing: border-box, of course)

Answer 2

Thanks, but the problem is that during the animation, the Padding part is filled with the image and doesn't scale well. Can you suggest what else can be done in my case?