minmax()默认为max。

Question

我尝试为grid-template-rows设置minmax()，有趣的是，结果是网格行扩展到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>

- user3789797

---

嘿，你找到关于额外列的问题的答案了吗？ - Michael Benjamin

据我所记，我没有找到确切的答案。但也许Rachel Andrew或Jen Simmons有答案，不过我现在不确定如何联系他们。我的猜测是：额外的列（和行）可能是为了将未使用的网格区域与网格中使用的区域分开而添加的。这是一种由Grid开发人员采用的奇怪混淆的设计选择。我在CSS Grid的规范中找不到任何相关内容。无论在哪里都没有人谈论它。如果您要联系他们，我对答案感兴趣。 @Michael_B - user3789797

https://dev59.com/6lMH5IYBdhLWcg3w7Vvx - Michael Benjamin

Answer 1

一般情况下，轨道将尝试达到其最大大小：

如果剩余空间是正数，则将其平均分配给所有轨道的基本大小，并在达到其增长限制时冻结轨道（并根据需要继续增长未冻结的轨道）。

在这种情况下，“增长限制”大多是“minmax（）中的最大大小”的同义词。

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

要获得所需的效果，即紧密包裹但不超过某个限制，请稍微调整所做的内容：

• 在行大小上使用minmax（50px，min-content）；这将使它们紧密地包裹内容，但不会让它们缩小到低于50px。
• 在实际网格项上使用max-height：150px，以便它们的最大高度为150px。

这两个方法结合起来应该可以实现您想要的效果。

- Xanthir

Answer 2

很清楚，主要浏览器默认使用 minmax() 函数中的 max 值。

规范定义不清楚如何处理此事——min 或 max 默认应该如何处理：

minmax()

定义大于等于 min 且小于等于 max 的尺寸范围。

如果 max < min，则忽略 max，并将 minmax(min,max) 视为 min。

作为最大值，<flex> 值设置了跟踪的弹性系数；它作为最小值是无效的。

可能还有更多关于此行为的内容，我还没有在跟踪大小算法中发现。

以下是解决问题的另一种方法：

• 将行高设置为 auto（基于内容的高度）
• 管理网格项的最小和最大高度

body {
  background: gray;
  border: solid black 1px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;  /* adjustment */
}

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

aside.homepage {
  background: blue;
  min-height: 50px;   /* new */
  max-height: 150px;  /* new */
}

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

- Michael Benjamin

---

这不是minmax()的一个bug吗？ 你引用的mozilla mdn的定义似乎意味着minmax在grid-template-row方面的行为不正确。或者我错了？ - user3789797

我不确定这是否是一个 bug，还是浏览器制造商正在解释规范。也许深入研究 W3C 文档和讨论板块会得出更多信息。 - Michael Benjamin