如何让 CSS Grid 项目占用剩余空间?

2022-01-18 00:00:00 grid html css css-grid

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

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>

推荐答案

添加 grid-template-rows: 1fr min-content; 到你的 .grid 会得到你正是你所追求的:).

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

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

相关文章