title: Masonry Layout that can span multiple columns
body: <p>I'm trying to create a masonry layout that can also span an item over 2 columns. So far I have made what I feel is a great start. Have a look:</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>.wrapper {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: 5px;
    max-width: 600px;
    margin: 0 auto;
  }
    
  .wrapper  div {
    background: red;
  }  
  
  .two {
    grid-column-end: span 2;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="one" style="grid-row-end: span 3"&gt;&lt;/div&gt;
    &lt;div class="one" style="grid-row-end: span 3"&gt;&lt;/div&gt;
    &lt;div class="one" style="grid-row-end: span 3"&gt;&lt;/div&gt;
    &lt;div class="two" style="grid-row-end: span 4; background-color: green;"&gt;&lt;/div&gt;
    &lt;div class="one" style="grid-row-end: span 4"&gt;&lt;/div&gt;
    &lt;div class="one" style="grid-row-end: span 2"&gt;&lt;/div&gt;
    &lt;div class="one" style="grid-row-end: span 3"&gt;&lt;/div&gt;
    &lt;div class="one" style="grid-row-end: span 2"&gt;&lt;/div&gt;
    &lt;div class="one" style="grid-row-end: span 5"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is a JsFiddle if you want to play with it: <a href="http://jsfiddle.net/9o4de38u/2/" rel="nofollow noreferrer">http://jsfiddle.net/9o4de38u/2/</a></p>
  
  <p>Now for this to work, I also have some javascript which determines how many rows the item needs to span. I don't think its relevant so I left it out and hard-coded values in the html for purposes of this demo.</p>
  
  <p>My problem here is if you take a closer look at my demo, the green box spans over 2 columns, however the space before the green is empty. Because the green had to take up 2 spaces, the previous element only took one leaving a big gap. I want to fill this gap with the element that comes after the green. However, I'm not certain what would be the best way to do this.</p>
  
  <p>My idea is to simply swap the order of elements in the html. If I swap green and the previous red then it will fill out nicely. The trouble is how to do this. My current thoughts are to use Javascript and use start position of the element to determine if a swap is needed. For Example if green box has a same starting position as the red box before it, swap them.</p>
  
  <p>But I don't know how much I can rely on this, what if a browser renders it off different and its off by a pixel, it will have no effect.</p>
  
  <p>My question is, what would be in your opinion the best way for me to accomplish what I want? </p>
  
  <p>If there is a library out there that does what I want, I'll accept that as an answer as well. I just couldn't find any that can allow an item to span multiple columns.</p>