Question

我有一张用CSS Grid布局构建的卡片。左侧可能有一个图像，右上角可能有一些文本，右侧底部可能有一个按钮或链接。

在下面的代码中，如何让绿色区域占用尽可能多的空间，同时使蓝色区域占用的空间尽可能小？

绿色应该尽可能地将蓝色区域向下推。

＆＃13;

.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;
}

＆＃13;

<div class="grid">
  <div class="one">
    One
  </div>
  <div class="two">
    Two
  </div>
  <div class="three">
    Three
  </div>
</div>

＆＃13;

Answer 1

将grid-template-rows: 1fr min-content;添加到.grid会使您完全得到以下内容：）。

＆＃13;

.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;
}

＆＃13;

<div class="grid">
  <div class="one">
    One
  </div>
  <div class="two">
    Two
  </div>
  <div class="three">
    Three
  </div>
</div>

＆＃13;

Jens编辑：为了获得更好的浏览器支持，可以使用此代码：grid-template-rows: 1fr auto;，至少在这种情况下。

Answer 2

网格是一系列相交的行和列。

您希望第二列中的两个项目根据内容高度自动调整行高。

这不是网格的工作方式。对第二列中行高的这种更改也会影响第一列。

如果你必须使用CSS Grid，那么我要做的是给容器，比方说12行，然后根据需要让项目跨越行。

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: repeat(12, 15px);
}

.one {
  grid-row: 1 / -1;
  background: red;
}

.two {
  grid-row: span 10;
  background: lightgreen;
}

.three {
  grid-row: span 2;
  background: aqua;
}

.grid > div {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="grid">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
</div>

否则，您可以尝试使用flexbox解决方案。

.grid {
  display: flex;
  flex-flow: column wrap;
  height: 200px;
}

.one {
  flex: 0 0 100%;
  width: 30%;
  background: red;
}

.two {
  flex: 1 0 1px;
  width: 70%;
  background: lightgreen;
}

.three {
  background: aqua;
}

.grid>div {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="grid">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
</div>

Answer 3

我是网格新手，如果不这样做，我会道歉。

可能的方法可能是将two和three组合在一起，然后使用flexbox？

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas: "one two"
}

.one {
  background: red;
  grid-area: one;
  padding: 50px 0;
}

.wrap {
  grid-area: two;
  display: flex;
  flex-direction: column;
}

.two {
  background: green;
  flex: 1;
}

.three {
  background: blue;
}

<div class="grid">
  <div class="one">
    One
  </div>
  <div class="wrap">

    <div class="two">
      Two
    </div>
    <div class="three">
      Three
    </div>
  </div>
</div>

Answer 4

绝对不是最优雅的解决方案，也不是最佳实践，但是您总是可以添加更多行

"one two"

在您拥有的部分之前

"one three"

所以最终看起来像

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
    "one two"
    "one two"
    "one two"
    "one three"
}

再次，可以肯定的是，这只是一个变通方案，并且还有更好的解决方案……但是，确实如此，

Answer 5

使用网格时，您已使用了网格模板区域，并且偶然您为特定区域指定了宽度，那么您将自动获得一个空格。在这种情况下，让grid-template-columns为min-content或max-content，以便它自动调整位置。

Answer 6

只需在要填充网格的项目的CSS类中使用width: 100%和height: 100%。如果您不希望网格容器中的网格项目增长到超过某个大小，请加入一个max-width属性和一个max-height属性。

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

6 个答案: