Question

我尝试为minmax()设置grid-template-rows，有趣的是，结果是网格行扩展到minmax()的最大值而非min。

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

以下是一个例子：

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

很明显，主要浏览器默认为max函数中的minmax()值。

规范定义不明确这个问题 - min或max默认情况？ - 应该处理：

minmax()

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

如果 max＆lt; min ，然后忽略 max 并处理minmax(min,max)   as min 。

作为最大值，<flex>值设置轨道的flex因子;它是   至少无效。

我可能还没有在track sizing algorithm中发现这种行为。

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

将行高设置为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>

Answer 2

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

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

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

通常碰巧是您希望曲目执行的操作。

要获得想要的效果，它会紧紧包裹但不会超出特定限制，您可以调整一下操作：

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

这两个应该可以达到您想要的效果。

minmax（）默认为最大

2 个答案: