title: CSS Grid: Make an element fill empty space
body: <p>I have a CSS grid where some elements span multiple rows. I'm trying to get the lower elements to fit snugly against the element above them, but they keep sticking to the bottom of the grid.</p>
  
  <p>Setting align-items to start or stretch doesn't help at all.</p>
  
  <pre><code>ul {
    display: grid;
    grid-template-areas:
      "a b"
      "c b"
      "c d";
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-gap: 10px;
    align-items: start;
  }
  .a { grid-area: a; }
  .b { grid-area: b; height: 5em; }
  .c { grid-area: c; height: 10em; }
  .d { grid-area: d; }
  
  
  
  &lt;ul&gt;
    &lt;li class="a"&gt;A&lt;/li&gt;
    &lt;li class="b"&gt;B&lt;/li&gt;
    &lt;li class="c"&gt;C&lt;/li&gt;
    &lt;li class="d"&gt;D&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This makes A and C touch, but B and D do not touch (unless you fill up D with more text). I want to make B &amp; D touch, leaving a gap to the bottom (or causing D to fill the entire space).</p>
  
  <p>Fiddle here: <a href="https://jsfiddle.net/JasonTank/Ltkhn6so/14/" rel="nofollow noreferrer">https://jsfiddle.net/JasonTank/Ltkhn6so/14/</a></p>