CSS 网格中的行不相等

Question

我正在尝试创建一个具有不等行的 CSS 网格，但我无法.feature-block-header只占用它实际需要的空间。我不希望它与 等高.feature-block-text。有没有一种方法可以采用 flex-grow 的方式，.feature-block-text以便它占用任何未使用的空间标头？

我想我已经尝试了几乎所有网格行属性......

.feature-block {
  display: grid;
  grid-template-columns: 320px auto;
  grid-column-gap: 10px;
  grid-template-areas:
    "feature-block-image feature-block-header"
    "feature-block-image feature-block-text";
}

.feature-block-header {
  grid-area: feature-block-header;
  background: yellow;
  margin-top: 0;
}

.feature-block-image {
  grid-area: feature-block-image;
  width: 320px;
  height: 320px;
  background: lightblue;
}

.feature-block-text {
  grid-area: feature-block-text;
  background: lightgreen;
}

<div class="feature-block">
  <h2 class="feature-block-header">Header</h2>
  <div class="feature-block-image"></div>
  <div class="feature-block-text">
    <p>Some text within text block</p>
  </div>
</div>

Answer 1

通过调整该grid-template-rows属性，可以调整行高。我刚刚将此属性添加到您的代码中以演示结果。

编辑：我更改50px为auto使其能够灵活调整行内容高度。

grid-template-rows: auto 1fr;

grid-template-rows: auto 1fr;

.feature-block {
  display: grid;
  grid-template-columns: 320px auto;
  grid-column-gap: 10px;
  grid-template-areas:
    "feature-block-image feature-block-header"
    "feature-block-image feature-block-text";
  grid-template-rows: auto 1fr;
}

.feature-block-header {
  grid-area: feature-block-header;
  background: yellow;
  margin-top: 0;
}

.feature-block-image {
  grid-area: feature-block-image;
  width: 320px;
  height: 320px;
  background: lightblue;
}

.feature-block-text {
  grid-area: feature-block-text;
  background: lightgreen;
}