Как сделать CSS-сетку, которая растягивает детей и учитывает минимальную высоту: 0 на них?

Question

У меня есть простая сетка CSS. Я бы хотел растянуть детей для заполнения доступного контента, но также уважать их, если у кого-либо из детей есть height: 0. Прямо сейчас это также "резервирует" место для ребенка с height: 0. Вот скрипка, показывающая мою проблему: https://jsfiddle.net/f3r0b5e9/7/

.wrapper {
  height: 300px;
  width: 200px;
  border: 1px solid red;
  display: grid;
  align-content: stretch;
  grid-template-rows: auto;
}

.child {
  width: 100%;
  border: 1px solid blue;
  background: #cad5e8;
}

.child.one {
  height: 0;
  min-height: 0;
  max-height: 0;
}

<div class="wrapper">
  <div class="child one">
  </div>
  <div class="child two">
  </div>
  <div class="child three">
  </div>
</div>

Вот что я пытаюсь сделать: http://prntscr.com/kqcry4

Примечание: я знаю, как сделать это с flexbox:)

Спасибо!

Answer 1

Вместо auto используйте min-content или max-content для значения grid-template-rows :

.wrapper {
  height: 300px;
  width: 200px;
  border: 1px solid red;
  display: grid;
  align-content: stretch;
  grid-template-rows: min-content;
}

.child {
  width: 100%;
  border: 1px solid blue;
  background: #cad5e8;
}

.child.one {
  height: 0;
  min-height: 0;
  max-height: 0;
}

<div class="wrapper">
  <div class="child one">
  </div>
  <div class="child two">
  </div>
  <div class="child three">
  </div>
</div>