title: How do you collapse unused row in a CSS grid?
body: <p>So I have a simple stack of three paragraphs on mobile that I want to style in a grid on larger viewports, without changing the source order.</p>
  
  <p>The first section might have anything from several lines to no content at all. </p>
  
  <p>In this case, how do I make the first row collapse so the second row fills the space? IE when the top section is empty, the last section should appear at the top</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-rows: min-content auto;
      grid-template-columns: 60% 40%;
      grid-template-areas: 
          "main first"
          "main last";
  }
  
  .first { grid-area: first; }
  .main { grid-area: main; }
  .last { grid-area: last; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid"&gt;
    &lt;b class="first"&gt;Grant me revenge!&lt;/b&gt;
    &lt;b class="main"&gt;Arnold ipsum. Just bodies. I need your clothes, your boots, and your motorcycle. Grant me revenge! And if you do not listen, then to HELL with you. Make it quick because my horse is getting tired. Come on don't bullshit me. Into the tunnel. Bring your toy back to the carpet.&lt;/b&gt;
    &lt;b class="last"&gt;Make it quick because my horse is getting tired.&lt;/b&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>