html - 如何制作拉伸(stretch)子项并尊重最小高度 : 0 on them? 的 CSS 网格

Question

我有简单的 CSS 网格。我希望它能拉伸(stretch) child 以填充可用内容，但如果任何 child 有 height: 0，我也会尊重它。现在它还为 height: 0 的 child “保留”空间。 这是显示我的问题的 fiddle : 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，为 grid-template-rows 使用 min-content 或 max-content的值(value):

.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>