how are different isotopes of an element created code example

Example 1: how to use isotope

// with jQuery
var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  getSortData: {
    name: '.name',
    category: '[data-category]'
  },
  // layout mode options
  masonry: {
    columnWidth: 200
  }
});

Example 2: how to use isotope

<!-- in HTML -->
<div class="grid" data-isotope='{ "itemSelector": ".grid-item", "getSortData": { "name": ".name", "category": "[data-category]" }, "masonry": { "columnWidth": 200 } }'>