HTML – 如何使CSS网格项占用剩余空间？

发布时间：2020-12-14 16:34:23 所属栏目：资源来源：网络整理

导读：我有一个用CSS Grid布局构建的卡.左侧可能有图像,右上角可能有文本,右侧底部可能有按钮或链接. 在下面的代码中,如何让绿色区域占用尽可能多的空间,同时使蓝色区域占用尽可能少的空间？绿色应该尽可能地将蓝色区域向下推. https://jsfiddle.net/9nxpvs5m/ .g

我有一个用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;,至少在这种情况下.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!