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

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

Answer 1

黑客可以在.left或.right上设置最大高度，并像隐藏一样溢出：

Measure-Command {$col = @(); foreach ($i in $L) { $col += $i }}

Answer 2

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

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

CSS Grid行仅在必要时才增加高度？

2 个答案:

jsFiddle demo