title: Prevent item stretch in CSS grid column
body: <p>I have the following HTML and CSS:</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>.grid {
    display: grid;
    grid-template-areas:
      '. b b b b b b . p p p .'
      '. b b b b b b . s s s .';
    
    &amp;__item {
      align-self: start;
      background-color: #999;
      
      &amp;--body {
        grid-area: b;
        height: 20rem;
      }
      
      &amp;--primarySidebar {
        grid-area: p;
      }
      
      &amp;--secondarySidebar {
        grid-area: s;
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid"&gt;
    &lt;div class="grid__item grid__item--body"&gt;
      Body
    &lt;/div&gt;
    &lt;div class="grid__item grid__item--primarySidebar"&gt;
      Primary sidebar
    &lt;/div&gt;
    &lt;div class="grid__item grid__item--secondarySidebar"&gt;
      Secondary sidebar
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The output looks like this:</p>
  <p><a href="https://i.stack.imgur.com/wJsot.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wJsot.png" alt="enter image description here" /></a></p>
  <p>Codepen here: <a href="https://codepen.io/CaribouCode/pen/RwgRPvb" rel="nofollow noreferrer">https://codepen.io/CaribouCode/pen/RwgRPvb</a></p>
  <p>It looks like <code>primarySidebar</code> has stretched to fill 50% of the overall height. How do I prevent it doing that, and therefore remove the space between <code>primarySidebar</code> and <code>secondarySidebar</code>?</p>
  <p><strong>Note:</strong> It's essential I use grid and this DOM structure for other reasons, so what I'm looking for here is some CSS properties I can add to avoid the unwanted vertical space.</p>