How to make CSS Grid items take up remaining space?

Question

I have a card built with CSS Grid layout. There might be an image to the left, some text to the right top and maybe a button or a link at the right bottom.

In the code below, how can I make the green area take up as much space as possible and at the same time make the blue area take up as little space as possible?

The green should push the blue area down as far as possible.

https://jsfiddle.net/9nxpvs5m/

.grid {    display: grid;    grid-template-columns: 1fr 3fr;    grid-template-areas:      "one two"      "one three"  }    .one {    background: red;    grid-area: one;    padding: 50px 0;  }    .two {    background: green;    grid-area: two;  }    .three {    background: blue;    grid-area: three;  }

<div class="grid">    <div class="one">      One    </div>    <div class="two">      Two    </div>    <div class="three">      Three    </div>  </div>

Answer 1

Adding grid-template-rows: 1fr min-content; to your .grid will get you exactly what you're after :).

.grid {    display: grid;    grid-template-columns: 1fr 3fr;    grid-template-rows: 1fr min-content;    grid-template-areas:      "one two"      "one three"  }    .one {    background: red;    grid-area: one;    padding: 50px 0;  }    .two {    background: green;    grid-area: two;  }    .three {    background: blue;    grid-area: three;  }

<div class="grid">    <div class="one">      One    </div>    <div class="two">      Two    </div>    <div class="three">      Three    </div>  </div>

Jens edits: For better browser support this can be used instead: grid-template-rows: 1fr auto;, at least in this exact case.