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
