title: Make CSS Grid row height flexible
body: <p>I am building a CSS Grid layout, and somehow I'm unable to get the "auto" value to work for the sizing of row height.</p>
  
  <p>The items keep a minimum height of 1fr, even if their content is small enough to allow them to shrink.</p>
  
  <p>Here is a code example that explains the problem - you can also check it out on <a href="https://codepen.io/16kbit/pen/RJbMWM" rel="noreferrer">https://codepen.io/16kbit/pen/RJbMWM</a></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>section {
    display: grid;
    grid-template-areas: "one top" "one bottom";
    align-items: start;
    border: 1px solid hotpink;
  }
  
  article {
    border: 1px solid green;
  }
  
  #one {
    grid-area: one;
  }
  
  #top {
    grid-area: top;
  }
  
  #bottom {
    grid-area: bottom;
    background: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;article id=one&gt;
      &lt;h1&gt;One&lt;/h1&gt;
      &lt;p&gt;Lorem cool dolizzle sit amizzle, dope sizzle elizzle. Nullam shiznit velizzle, get down get down volutpizzle, suscipizzle quizzle, dizzle mammasay mammasa mamma oo sa, arcu. Pellentesque sheezy tortizzle. Sed erizzle. Fusce izzle dolor shiznit pimpin'
        tempizzle tempor. Maurizzle pellentesque nibh shizzlin dizzle turpizzle. Vestibulum in tortor. Pellentesque cool rhoncus black. In hac fo shizzle my nizzle check out this dictumst. Black uhuh ... yih!. Mammasay mammasa mamma oo sa tellizzle shiz,
        pretizzle shiznit, mattizzle fo, gangster vitae, nunc. Get down get down suscipizzle. Own yo' away izzle sed cool.Nullizzle fizzle shut the shizzle up yo mamma orci daahng dawg viverra. Phasellus nizzle shizzle my nizzle crocodizzle. Curabitizzle
        sure velit vizzle check out this dizzle doggy. Maecenas sapien nulla, iaculis shiz, molestie hizzle, egestas a, erizzle. Shit vitae turpis quizzle nibh bibendizzle boom shackalack. Nizzle pulvinar dope velizzle. Aliquizzle mammasay mammasa mamma
        oo sa volutpat. Nunc izzle its fo rizzle at lectus pretizzle faucibizzle. We gonna chung nec lacizzle own yo' fizzle pizzle ultricizzle. Ut nisl. Crunk et owned. Integer laoreet ipsum shizzlin dizzle mi. Donizzle at shiz.&lt;/p&gt;
    &lt;/article&gt;
    &lt;article id=top&gt;
      &lt;h1&gt;Top&lt;/h1&gt;
      &lt;p&gt;Just Two Words&lt;/p&gt;
    &lt;/article&gt;
    &lt;article id=bottom&gt;
      &lt;h1&gt;Bottom&lt;/h1&gt;
      &lt;p&gt;Help Me! How can I get closer to my Top neighbour?&lt;/p&gt;
    &lt;/article&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>The result I want:</h2>
  
  <p>I want the #bottom item to move as close as possible to the #top item. And I want them to shrink to their contents size.</p>
  
  <h2>Actual result:</h2>
  
  <p>The CSS Grid doesn't allow the item's height to be smaller than 1fr unit (50% of the total height) – which is changing depending on the #one item, that has a lot of text. </p>
  
  <p>Visual explanation: instead of the result on the left, I want the result on the right:</p>
  
  <p><a href="https://i.stack.imgur.com/R0BKn.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/R0BKn.jpg" alt="Visual explanation of CSS layout issue"></a></p>