title: How do I make a CSS grid cell collapse when empty or using display:none?
body: <p><strong>TL;DR</strong>: Codepen <a href="https://codepen.io/veleek/pen/YmJGjY" rel="nofollow noreferrer">https://codepen.io/veleek/pen/YmJGjY</a> shows that grid cell with <code>display: none</code> seems to cause adjacent cell to take up less space instead of collapsing to nothing.</p>
  
  <p>I'm creating a simple CSS Grid layout with a banner at the top with a logo, title, link bar, and a content block underneath.</p>
  
  <p><a href="https://i.stack.imgur.com/njEmU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/njEmU.png" alt="Rough layout"></a></p>
  
  <p>For pages without nav links I'd like to collapse the nav section so that the title takes up the entire space.  Effectively I want that grid cell to be 0px tall.  </p>
  
  <p>Unfortunately, when I set <code>display: none</code> on that cell, it disappears but it seems to take up MORE space.  This actually causes the title to collapse itself down to be SMALLER then when that cell is present.  </p>
  
  <p><a href="https://i.stack.imgur.com/00c2k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/00c2k.png" alt="Title collapsing to be smaller"></a></p>
  
  <p>The image size is not fixed at 150px and I'd prefer to avoid fixed sizes if possible.  I just want to force that grid row to have 0 height when it's empty.  I've tried a bunch of combinations of <code>display:block/flex</code>, <code>align-items/justify-content/etc.: stretch/center/etc.</code> but nothing seems to work.  </p>
  
  <p>I've got a CodePen showing the issue here: <a href="https://codepen.io/veleek/pen/YmJGjY" rel="nofollow noreferrer">https://codepen.io/veleek/pen/YmJGjY</a></p>