CODEWITHSUNDEEP
htmlcsscss-grid
pennyroyal
pennyroyal

Reputation: 250

How to make CSS grid that stretches children and respects min-height: 0 on them?

I have simple css grid. I'd like it to stretch children to fill available content but also respect it if any of the children has height: 0. Right now it also "reserves" space for the child with height: 0. Here's the fiddle showing my problem: 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>

Here's what I'm trying to accomplish: http://prntscr.com/kqcry4

Note: I know how to do this with flexbox:)

Thanks!

Upvotes: 4

Views: 5762

Answers (1)

VXp
VXp

Reputation: 12118

Instead of auto, use min-content or max-content for the grid-template-rows's 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>

Upvotes: 9

Related Questions