title: Collapse or merge grid cells if content is not there
body: <p>If I have a grid like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Ud8R4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ud8R4.png" alt="Grid layout"></a></p>
  
  <p>Is there a way to automatically push the grid item 3 up to take the space of grid item 1?</p>
  
  <p>Structure:</p>
  
  <pre><code>&lt;div id="1"&gt;&lt;/div&gt;
  &lt;div id="2"&gt;Content&lt;/div&gt;
  &lt;div id="3"&gt;Content&lt;/div&gt;
  </code></pre>
  
  <p>For grid item 2 I do this:</p>
  
  <pre><code>grid-row: 1 / span 2;
  </code></pre>
  
  <p>But i cannot do that for grid item 3 because then if there is content in item 1, it overlaps it. And in my case I do not know if there is content or not</p>