title: CSS Grid Flow Different Sized Blocks
body: <p>Is it possible to create a CSS grid that allows for different sized content blocks that don't have fixed starting positions with other blocks flowing around?</p>
  
  <p>Here's my test</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="grid"&gt;
  
    &lt;div class="item"&gt;Small 1&lt;/div&gt;
    &lt;div class="item"&gt;Small 2&lt;/div&gt;
    &lt;div class="item large"&gt;Large 1&lt;/div&gt;
    &lt;div class="item large"&gt;Large 2&lt;/div&gt;
  
    &lt;div class="item"&gt;Small 3&lt;/div&gt;
    &lt;div class="item"&gt;Small 4&lt;/div&gt;
    &lt;div class="item"&gt;Small 5&lt;/div&gt;
    &lt;div class="item"&gt;Small 6&lt;/div&gt;
  
    &lt;div class="item"&gt;Small 7&lt;/div&gt;
    &lt;div class="item"&gt;Small 8&lt;/div&gt;
    &lt;div class="item"&gt;Small 9&lt;/div&gt;
    &lt;div class="item"&gt;Small 10&lt;/div&gt;
  
    &lt;div class="item"&gt;Small 11&lt;/div&gt;
    &lt;div class="item"&gt;Small 12&lt;/div&gt;
    &lt;div class="item"&gt;Small 13&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>* { 
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }   
  
  body {
    padding: 5em;
  }
  
  .grid { 
    display: grid; 
    grid-template-columns: 25% 25% 25% 25%; 
    grid-gap: 1em 1em;
    grid-auto-flow: row dense;
  }
  
  .item {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0.25em;
    padding: 2em;
  }
  
  .large {
    background: rgba(255, 0, 0, 0.25);
    grid-column: auto / span 2;
    grid-row: auto / span 2;
  }
  </code></pre>
  
  <p>Fiddle:
  <a href="https://jsfiddle.net/bLjzscLs/" rel="nofollow noreferrer">https://jsfiddle.net/bLjzscLs/</a></p>
  
  <p>Expected:
  <a href="https://i.stack.imgur.com/KwjFe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KwjFe.png" alt="IMAGE"></a></p>
  
  <p>Actual:
  <a href="https://i.stack.imgur.com/wP3Qq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wP3Qq.png" alt="IMAGE"></a></p>