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 co

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;
}

  

    One
  
  

    Two
  
  

    Three
  

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