如何让CSS个网格项占满剩余space个？

Question

我有一张使用 CSS 网格布局构建的卡片。左侧可能有图片，右上角可能有一些文本，右下角可能有按钮或 link。

在下面的代码中，如何让绿色区域尽可能多地占用space，同时让蓝色区域尽可能少地占用space？

绿色应该尽可能地把蓝色区域压低。

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

Answer 1

一种可能的方法是将 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 2

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

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

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

如果您必须使用 CSS 网格，那么我要做的是给容器，比方说，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

将 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;，至少在这种情况下是这样。

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

当使用网格时，您使用了网格模板区域，并且偶然为特定区域指定了宽度，您会自动得到 space 网格。在这种情况下，让 grid-template-columns 为 min-content 或 max-content，以便它自动调整其位置。

Answer 6

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

如何让CSS个网格项占满剩余space个？

How to make CSS Grid items take up remaining space?

html

css

grid

css-grid