title: Fill in gaps in CSS grid layout
body: <p>I'm trying to achieve a grid layout to match this wireframe:</p>
  
  <p><a href="https://i.stack.imgur.com/AdsMX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AdsMX.png" alt="wireframe"></a></p>
  
  <p>So far I've got the following markup:</p>
  
  <pre><code>&lt;div class="grid"&gt;
    &lt;div class="spanWidth"&gt;
      &lt;img src="https://loremflickr.com/290/130?random=1" /&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="https://loremflickr.com/140/130?random=2" /&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="https://loremflickr.com/140/180?random=3" /&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="https://loremflickr.com/140/130?random=4" /&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="https://loremflickr.com/140/130?random=5" /&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="https://loremflickr.com/140/180?random=6" /&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img src="https://loremflickr.com/140/130?random=7" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>with CSS:</p>
  
  <pre><code>.grid {
    display: grid;
    grid-gap: 10px;
  }
  
  .spanWidth {
    grid-column: 1 / span 2;
  }
  </code></pre>
  
  <p>The problem I'm running into is that the irregularly-sized images don't conform to a 'row' layout. They take up 1.25 rows. Which means I end up with gaps in the grid:</p>
  
  <p><a href="https://i.stack.imgur.com/uwDPq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uwDPq.png" alt="grid with gaps"></a></p>
  
  <p>Is there anything I can do here to match the wireframe?</p>