我有一个用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;,至少在这种情况下.
原文地址:https://www.jb51.cc/html/227481.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。