title: Masonry -- items stack on top of each other -- Vanilla JS
body: <p>First time I'm using <strong>Masonry.js</strong>, I try to display my items in a simple grid but all items are just in <code>position: absolute</code> so they stack on each other.</p>
  
  <p>I try to add a <code>margin: 0 auto</code> on the gutter selector as advice on <a href="https://stackoverflow.com/questions/46713799/masonry-vanilla-js-stacks-elements-on-top-of-each-other-in-chrome-and-edge">this post</a> but it won't help.</p>
  
  <p>Here is a fiddle, am I doing something wrong?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let grid = document.querySelector('.main__content'),
    msnry = new Masonry(grid, {
      itemSelector: '.item',
      columnWidth: '.item--sizer',
      percentPosition: true,
      gutter: '.item--gutter',
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.item {
    background: #eee;
    padding: 1rem;
    border: 1px solid darken(#eee, 5%);
    width: calc(50% - 2rem);
    &amp;--sizer {
      width: calc(50% - 2rem);
    }
    &amp;--gutter {
      width: 2rem;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main__content"&gt;
    &lt;div class="item"&gt;This is an item 1&lt;/div&gt;
    &lt;div class="item"&gt;This is an item 2&lt;/div&gt;
    &lt;div class="item"&gt;This is an item 3&lt;/div&gt;
    &lt;div class="item"&gt;This is an item 4&lt;/div&gt;
    &lt;div class="item"&gt;This is an item 5&lt;/div&gt;
    &lt;div class="item"&gt;This is an item 6&lt;/div&gt;
    &lt;div class="item"&gt;This is an item 7&lt;/div&gt;
    &lt;div class="item"&gt;This is an item 8&lt;/div&gt;
    &lt;div class="item"&gt;This is an item 9&lt;/div&gt;
    &lt;div class="item"&gt;This is an item 10&lt;/div&gt;
    &lt;div class="item"&gt;This is an item 11&lt;/div&gt;
    &lt;div class="item"&gt;This is an item 12&lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you in advance.</p>
  
  <p><em>AW</em></p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>Regarding Sabuja's answer, I fix the problem as you can see in the following <em>jsFiddle</em>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let grid = document.querySelector('.main__content'),
      msnry = new Masonry(grid, {
        itemSelector: '.item',
        columnWidth: '.item--sizer',
        percentPosition: true
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*, *:before, *:after {box-sizing:  border-box !important;}
  
  .item {
    background: #eee;
    padding: 1rem;
    border: 1px solid #ddd;
    width: 50%;
    
    &amp;--sizer {
      width: 50%;
    }
    
    &amp;--is-invisible {
      visibility: hidden;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main__content"&gt;
    &lt;div class="item"&gt;This is an item 1&lt;/div&gt;
    &lt;div class="item"&gt;This is an item 2&lt;/div&gt;
    &lt;div class="item"&gt;This is an item 3 with fake news : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut hic et amet, autem provident ab magnam cumque nihil dolorum incidunt fugiat placeat iusto libero sapiente accusantium mollitia velit, harum minima.&lt;/div&gt;
    &lt;div class="item"&gt;This is an item 4&lt;/div&gt;
    &lt;div class="item"&gt;This is an item 5&lt;/div&gt;
    &lt;div class="item"&gt;This is an item 6&lt;/div&gt;
    &lt;div class="item"&gt;This is an item 7&lt;/div&gt;
    &lt;div class="item"&gt;This is an item 3 with fake news : Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut hic et amet, autem provident ab magnam cumque nihil dolorum incidunt fugiat placeat iusto libero sapiente accusantium mollitia velit, harum minima.&lt;/div&gt;
    &lt;div class="item"&gt;This is an item 9&lt;/div&gt;
    &lt;div class="item"&gt;This is an item 10&lt;/div&gt;
    &lt;div class="item"&gt;This is an item 11&lt;/div&gt;
    &lt;div class="item"&gt;This is an item 12&lt;/div&gt;
    
    &lt;div class="item item--is-invisible item--sizer"&gt;&lt;/div&gt;
    &lt;div class="item item--is-invisible item--gutter"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>