Как сделать CSS Grid последней строкой, чтобы занять оставшееся место

Question

У меня есть сетка с переменным количеством строк, и я хочу, чтобы последняя была 1fr высоты.

Примерно так:

Есть ли способ сделать это?

Answer 1

вы можете использовать flex для этого.

В родительском контейнере должно быть display: flex;.Мы хотим использовать его по вертикали, поэтому мы будем изменять направление изгиба следующим образом: flex-direction: column;.

. После этого мы будем использовать свойство flex-shrink: 1; для каждого дочернего элемента.Таким образом, он займет только необходимое / указанное пространство.Хитрости для последнего ребенка заключается в использовании свойства flex-grow: 1;, чтобы оно заняло доступное пространство.

См. Фрагмент ниже:

html, body {
  height: 100%;
}

.fill-height {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.fill-height > div {
  border: 1px solid red;
  min-height:2em;
  flex-shrink: 1;
}

.fill-height > div:last-child {
  flex-grow: 1;
}

<section class="fill-height">
  <div>
    row 1 (shrink)
  </div>
  <div>
    row 2 (shrink)
  </div>
  <div>
    row 3 (grow)
  </div>
</section>

Ссылка на JsFiddle