html - 仅在必要时才扩展高度的 CSS 网格行？

Question

我正在尝试创建一个包含两行的 CSS 网格。我希望底部的行固定为 47px 高。这很容易。给我带来麻烦的是第一行。

我希望我的 CSS 网格的顶行至少有 250 像素高，即使该行中没有内容。但是如果内容在那里，我希望该行将其高度扩展到最大 303px 高。也就是说，我希望行的高度仅在内容需要时才增长。

从我看到的类似 grid-template-rows: minmax(250px, 303px) 的内容来看，如果有足够的空间，它会扩展到 303px。

即使有足够的空间，我也不希望它扩展，除非它必须扩展 - 也就是说，它扩展只是因为有超过 250 像素的内容。

我有一个像这样的简单网格:

<div class="myGrid">
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
</div>

像这样使用 CSS:

.myGrid {
    display: grid;
    max-height: 350px;
    grid-template-rows: minmax(250px, 303px) 47px;
    grid-template-columns: 1fr 2.5fr;
    grid-template-areas: "a b" "c c";
}

.left {
    grid-area: a;
}

.right {
    grid-area: b;
}

.bottom {
    grid-area: c;
}

使用此代码，顶行始终为 303 像素，大概是因为有足够的空间可以扩展到该高度。但我只希望它在内容需要时扩展到那个高度。

Answer 1

与其在网格容器级别控制行的最小和最大高度，不如在网格项级别控制它们。

.myGrid {
  display: grid;
  max-height: 350px;
  grid-template-rows: auto 47px;
  grid-template-columns: 1fr 2.5fr;
  grid-template-areas: "a b" "c c";
}

.left {
  min-height: 250px;
  max-height: 303px;
  grid-area: a;
  background-color: aqua;
}

.right {
  min-height: 250px;
  max-height: 303px;
  grid-area: b;
  background-color: lightgreen;
}

.bottom {
  grid-area: c;
  background-color: orangered;
}

body {
  margin: 0;
}

<div class="myGrid">
  <div class="left"></div>
  <div class="right"></div>
  <div class="bottom"></div>
</div>

jsFiddle demo