html - minmax() 默认为最大值

Question

我尝试为 grid-template-rows 设置 minmax()，有趣的是，结果是 grid-rows 扩展到 的最大值>minmax() 而不是最小值。

我们如何才能使网格行保持最小声明大小，并且稍后如果添加更多内容 - 网格行将扩展到最大声明大小而不是更多？

这是一个例子:

body {
  background: gray;
  border: solid black 1px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: minmax(50px, 150px);
}

aside {
  border-right: solid 1px red;
}

aside.homepage {
  background: blue;
}

<aside></aside>
<aside class="homepage">
  <header></header>
  <main></main>
  <footer></footer>
</aside>
<aside></aside>

Answer 1

In general, tracks will try to reach their max size:

If the free space is positive, distribute it equally to the base sizes of all tracks, freezing tracks as they reach their growth limits (and continuing to grow the unfrozen tracks as needed).

(在这种情况下，“增长限制”主要是“minmax() 中的最大尺寸”的同义词。)

这通常恰好是您希望轨道执行的操作。

要获得您正在寻找的效果，它会紧紧包裹但不会超过某个限制，您可以稍微调整一下您正在做的事情:

• 在行大小上使用 minmax(50px, min-content)；这会将它们紧紧包裹在内容中，但不会让它们收缩到 50 像素以下。
• 在实际的网格项上使用 max-height: 150px，因此它们将达到 150px 的最大值。

这两个一起应该可以达到你想要的效果。