CSS Grid: сделать элемент заполненным пустым пространством

Question

У меня есть сетка CSS, где некоторые элементы занимают несколько строк.Я пытаюсь сделать так, чтобы нижние элементы плотно прилегали к элементу над ними, но они продолжают прилипать к нижней части сетки.

Установка начальных или растягивающих элементов выравнивания не помогает вообще.

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>

Это делает касания A и C, но B и D не касаются (если вы не заполните D большим количеством текста).Я хочу, чтобы B & D соприкасался, оставляя зазор внизу (или заставляя D заполнять все пространство).

Скрипка здесь: https://jsfiddle.net/JasonTank/Ltkhn6so/14/

Answer 1

Если вы удалите align-items: start; на ul и добавите в другую область, чтобы у вас было 4 строки, тогда она должна работать так, как вы ожидаете.

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>

Я обновил вашу скрипку для вас.