How to setup the isotope masonry gallery

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

 <ul class="grid" data-isotope='{ "itemSelector": ".ptf-item", "layoutMode": "fitRows"}'>
  <li class="ptf-item branding" data-category="branding">
   <div class="grid-item-wrapper">
    <a class="portfolio-link" href="portfolio-item.html"></a>
    <div class="ag-gridGallery__img-container">
     <img src="images/portf_07.jpg" alt title="portfolio1">
    </div>
    <div class="portfolio-overlay">
     <div class="portfolio-inner">
       <i class="ag-icon glyphicon glyphicon-link ag-icon__circled-icon"></i>
     </div>
    </div>
  </div>
 </li>

The class that triggers the js file is .ptf-item

To change the filter names, the data-filter has to be changed in the navigation and in each li  of the portfolio item, the class and data category

<li class="ptf-item branding" data-category="branding">

 

On the news.html page, the class that triggers the isotope is “.grid”, and each isotope item class is “.ptf-item”

<ul class="grid" data-isotope='{ "itemSelector": ".grid-item", "layoutMode": "masonry" }'>
 <li class="grid-item grid-item--width3">

 

On the index page, the code looks in the following way:

<div class="grid ag-gridGallery-jstrigger " data-isotope='{ "itemSelector": ".grid-item", "layoutMode": "fitRows" }'>

<div class="grid-item grid-item--width2 gallery-item">

The class that triggers the masonry is "grid" and the masonry items are defined by "grid-item grid-item--width2" 

The styles of the grid elements are found in app/css/scss/elements/_portfolio.scss