title: jquery: Initialising masonry plugin properly?
body: <p>I would like to use the <a href="https://masonry.desandro.com/" rel="nofollow noreferrer">masonry plugin by Dave DeSandro</a> for the construction of a site. As a first step, in order to learn how it works, I tried recreating one of the demos on the masonry page, <a href="https://codepen.io/desandro/pen/JFpeg" rel="nofollow noreferrer">this one.</a></p>
  
  <p>Unfortunately, recreating it did not work, the layout of the divs is not working as intended. But I don't understand why, here's a jsfiddle of my attempt to recreate exactly what the demo shows: </p>
  
  <p><a href="https://jsfiddle.net/johschmoll/L1L2kgkz/2/" rel="nofollow noreferrer">https://jsfiddle.net/johschmoll/L1L2kgkz/2/</a></p>
  
  <p>Can someone point out the mistake to me? I believe it has something to do with me not initialising the plugin properly with jquery?</p>
  
  <p>I am trying to initialise the plugin just as it is mentioned in <a href="https://masonry.desandro.com/layout.html" rel="nofollow noreferrer">the documentation of the demo</a>: </p>
  
  <pre><code>$('.grid').masonry({
    // set itemSelector so .grid-sizer is not used in layout
    itemSelector: '.grid-item',
    // use element for option
    columnWidth: '.grid-sizer',
    percentPosition: true
  })
  </code></pre>
  
  <p>UPDATE:</p>
  
  <p>I'm slightly more confused, now that recreating it on codepen worked perfectly well <a href="https://codepen.io/anon/pen/JrjmRa" rel="nofollow noreferrer">https://codepen.io/anon/pen/JrjmRa</a></p>