How to make CSS Grid last row to take up remaining space

Question

I have a grid with variable number of rows and I want the last one to be 1fr height.

Something like this:

Is there any way of doing that?

Answer 1

You could use flex for this.

The parent container should have display: flex;. We want to use it vertically, so we will change the flex direction like this flex-direction: column;.

After this, we will use the property flex-shrink: 1; for every child. This way, it will take only the space needed/specified. The tricks for the last child is to use the property flex-grow: 1; so it will take the available space.

See the snippet below:

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>

Link to JsFiddle