如何让CSS Grid项目占用剩余空间？ [英] How to make CSS Grid items take up remaining space?

问题描述

我有一张使用CSS网格布局构建的卡片。在左侧可能会有图像，右侧顶部有一些文字，右侧可能有按钮或链接。

在下面的代码中，我怎么能使绿地占用尽可能多的空间，同时使蓝色区域占用尽可能小的空间？绿色应推动蓝色区域尽可能向下。

https：// jsfiddle。 net / 9nxpvs5m /

.grid {display：grid; grid-template-columns：1fr 3fr; grid-template-areas：one twoone three}。one {background：red;网格面积：一个; padding：50px 0;}。two {background：green; grid-area：two;}。three {background：blue; grid-area：three;}

< div class = 网格 > < div class =one> One< / div> < div class =two>两个< / div> < div class =three>三< / div>




解决添加 grid-template-rows：1fr min-content; 添加到 .grid 将会得到你正确的结果：）。

.grid {显示：网格; grid-template-columns：1fr 3fr; grid-template-rows：1fr min-content; grid-template-areas：one twoone three}。one {background：red;网格面积：一个; padding：50px 0;}。two {background：green; grid-area：two;}。three {background：blue; grid-area：three;}

< div class = 网格 > < div class =one> One< / div> < div class =two>两个< / div> < div class =three>三< / div>


$ b Jens编辑：为了更好的浏览器支持，至少在这种情况下，可以使用 grid-template-rows：1fr auto; p>

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>

解决方案

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.

这篇关于如何让CSS Grid项目占用剩余空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！