html - 如何让 CSS Grid 元素占用剩余空间？

Question

我有一张使用 CSS 网格布局构建的卡片。左侧可能有图片，右上角有一些文本，右下角可能有按钮或链接。

在下面的代码中，如何让绿色区域占用尽可能多的空间，同时让蓝色区域占用尽可能少的空间？

绿色应该尽可能地压低蓝色区域。

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

将 grid-template-rows: 1fr min-content; 添加到您的 .grid 将使您得到您想要的:)。

.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 编辑:为了更好的浏览器支持，可以改用它:grid-template-rows: 1fr auto;，至少在这种情况下是这样。