How to setup the isotope masonry gallery

The 3 column masonry gallery is found on shop.html page

 <ul class="product-grid">
  <li class="product" data-category="wordpress" data-price='49.00' data-title='Startup' data-popularity='1' data-date='2009'>
   <div class="product-item">
[..]
   </div>
  </li>
[..]
 </ul>

The class that triggers the isotope is ".product"

The layout of this element can be changed by adding in the markup " product--4col " or "product--2col" classes in li element

The style of this element is found in app/css/scss/elements/_shop.scss

On the blog page the markup is the following:

 <ul class="grid" data-isotope='{ "itemSelector": ".grid-item", "layoutMode": "masonry" }'>
   <!--start first article-->
   <li class="grid-item grid-item--width3">
   [..]
   </li>
  [..]
 </ul>

The layout of this element can be changed by adding in the markup "grid-item--width2 " or "grid-item--width2" classes in li element

The style of this element is found in app/css/scss/elements/_blog.scss