CSS Grid: Make an element fill empty space

Question

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.

Setting align-items to start or stretch doesn't help at all.

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; }



<ul>
  <li class="a">A</li>
  <li class="b">B</li>
  <li class="c">C</li>
  <li class="d">D</li>
</ul>

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 & D touch, leaving a gap to the bottom (or causing D to fill the entire space).

Fiddle here: https://jsfiddle.net/JasonTank/Ltkhn6so/14/

There is already a question on that. Try the below link https://stackoverflow.com/questions/45799207/how-to-make-css-grid-items-take-up-remaining-space — Thameem, Feb 08 '19 at 07:01
Thanks for that @Thameem I went through several different ways to frame the question and couldn't find anything. — druidic, Feb 08 '19 at 22:33
There's a really good but non-intuitive solution to this: https://stackoverflow.com/questions/67645467/typescript-can-i-make-a-type-that-only-accepts-the-names-of-html-tags do you want an answer to that question? — CertainPerformance, May 22 '21 at 02:03

coops · Accepted Answer · 2019-02-08T23:16:54.080

If you remove your align-items: start; on the ul, and add in another area so you have 4 rows, then it should work as you expect.

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
}

ul {
  display: grid;
  grid-template-areas:
    "a b"
    "c b"
    "c d"
    "c d";
  grid-gap: 10px;
}
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; height: 10em; }
.d { grid-area: d; }

li {
  background-color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}


button {
  background: #f0f;
  color: #000;
  border-color: #00f;
  margin: 0 0 1em;
}

<ul>
  <li class="a">A</li>
  <li class="b">B</li>
  <li class="c">C</li>
  <li class="d">D</li>
</ul>

I've updated your fiddle for you.

Thank you, this was great. I wish I understood _why_ it worked, but between you and the other commenter, I have multiple solutions now. — druidic, Feb 08 '19 at 22:35

CSS Grid: Make an element fill empty space

1 Answers1