title: How to get css grid masonry layout with equal spacing?
body: <p>So I have used <a href="https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb" rel="nofollow noreferrer">this</a> tutorial to create a CSS grid based masonry layout for my website. I just have one issue, the spacing between my <code>divs</code> are uneven, specifically the problem lays in the unevenness of the row gap, and I am at a loss of ideas to figure out a way to fix this. </p>
  
  <p>Below is my <code>js</code>. I have made some minor edits such as not using the <code>imagesLoaded</code> library but I don't think that makes a difference. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var counter = 0;
      var grid = document.getElementsByClassName("mod_catalogUniversalView")[0];
      var images = grid.getElementsByTagName("img");
  
      function resizeGridItem(item) {
          if (grid.hasChildNodes('ctlg_teaser')) {
              grid.classList.add('list_grid');
          }
          var rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
          var rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
          var rowSpan = Math.ceil((item.querySelector('.ctlg_entity').getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
          item.style.gridRowEnd = "span " + rowSpan;
      }
  
      function imagesLoaded() {
          counter++;
          if (counter === images.length) {
              return true;
          }
      }
  
      function resizeAllGridItems() {
          var allItems = document.getElementsByClassName("ctlg_teaser");
          for (var x = 0; x &lt; images.length; x++) {
              if (images[x].complete) {
                  imagesLoaded();
              } else {
                  images[x].addEventListener('load', imagesLoaded, false);
              }
          }
  
          if (imagesLoaded) {
              for (var x = 0; x &lt; allItems.length; x++) {
                  resizeGridItem(allItems[x]);
              }
          }
      }
  
      window.onload = resizeAllGridItems();
      window.addEventListener("resize", resizeAllGridItems);
  
      $(document).ready(function() {
          if (imagesLoaded) {
              $('.ctlg_teaser').fadeTo(500, 1);
          }
      });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Below is my <code>css</code> for the <code>list_grid</code> class:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>display: grid;
  grid-row-gap: 5px;
  grid-column-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 10px;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Add a few screenshots:</p>
  
  <p><a href="https://i.stack.imgur.com/yzfpE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yzfpE.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/BWWWK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BWWWK.png" alt="enter image description here"></a></p>