CODEWITHSUNDEEP
csscss-grid
druidic
druidic

Reputation: 65

CSS Grid: Make an element fill empty space

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/

Upvotes: 3

Views: 1564

Answers (1)

coops
coops

Reputation: 1714

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.

Upvotes: 3

Related Questions