我有一张用 CSS 网格布局构建的卡片。左侧可能有一个图像，右上角有一些文本，右下角可能有一个按钮或链接。
在下面的代码中，如何使绿色区域占用尽可能多的空间，同时使蓝色区域占用尽可能少的空间？
绿色应将蓝色区域尽可能向下推。
https://jsfiddle.net/9nxpvs5m/ 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;给你的.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>
延斯编辑：为了获得更好的浏览器支持，可以使用以下方法：grid-template-rows: 1fr auto;，至少在这种情况下是这样。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
