Masonry images overlapping above each other - 圖片重疊問題

JS部分

  
<script src="https://code.jquery.com/jquery-1.12.4.min.js"  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<!--先放masonjs 再放imgloadjs,才不會黏再一起，此script要放在網頁下面-->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script>
// 啟動 Masonry
var $grid = $('.grid').masonry({
 itemSelector: '.grid-item',
 percentPosition: true,
 columnWidth: '.grid-sizer'
 });
 // 當圖片都下載後才開始布局
 $grid.imagesLoaded().progress( function() {
 $grid.masonry();
});   
</script>
  

HTML部分

  
<div class="grid-sizer"></div>
<div class="grid row" data-masonry='{ "itemSelector": ".grid-item" }'>
     <div class="grid-item col-xs-6 col-sm-4 col-md-4">法語課程</div>
     <div class="grid-item col-xs-6 col-sm-4 col-md-4">法語課程2</div>
</div>