How to setup the isotope masonry gallery

The 3 column /2 column masonry gallery is found on shop.html and blog.html pages

 <div class="grid ">
   <div class="grid-item gutter-30" data-price="85.00" data-title="Black hoodie" data-popularity="1" data-date="2017">
     <a href="product.html">
      <img src="images/store-product-14.jpg" class="img-fluid image-cover-fit image-box-img" alt title="shop">
     </a>
     <div class="img-overlay txt-center">
        <div class="title-block txt-center">
         <a href="product.html"> <h3 class="title-block__title--hover">Black Hoodie</h3></a>
        </div>
        <div class="hover-price">
         <span class="" ><sup>$</sup>25.0</span>
        </div>
        <div class="add-to-cart"><a href="#" class="add-to addtocart-trigger" data-quantity="1" data-price="25"> <span>Add to cart</span></a></div>
     </div>
  </div>
..
 </div>

The class that triggers the isotope is ".grid" for the shop page and .blog-grid for the blog page.

The markup for the blog grid is the following

<ul class="blog-grid">
  <li class="blog-grid__article gutter-30">
  ...
  </li>
</ul>

the css files have the following path

app\css\scss\elements\_blog.scss

and

app\css\scss\elements\_shop.scss