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

延斯·托内尔(JensTörnell):

我有一张使用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;,至少在这种情况下,可以使用代替::

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

热门标签

归档