我有一个用CSS Grid布局构建的卡.左侧可能有图像,右上角可能有文本,右侧底部可能有按钮或链接.
在下面的代码中,如何让绿色区域占用尽可能多的空间,同时使蓝色区域占用尽可能少的空间？
绿色应该尽可能地将蓝色区域向下推.
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会得到你正在追求的:).
.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;,至少在这种情况下.
