有没有一种方法可以指定css网格行随内容增长，直到达到最大值？

neekobn8 于 2023-03-20 发布在其他

关注(0)|答案(1)|浏览(129)

现在我在css网格中指定一行时遇到了麻烦。我试图实现的是一行随其内容增长，但最多达到一个最大值。类似于：
min（最小含量，80 vh）
但是，我不能在min（）css函数中使用min-content，因为它不是一个数字。

1条答案

假设我们想要一个由三个大小的列组成的网格，我们想要确定三行的大小，使它们的高度至少为100像素，并且最大高度对它们是自由的，也就是说，不管它们里面的内容是什么，为此，我们可以很容易地使用minmax函数。
这是您要查找的内容吗？如果是，请查看以下代码：

.grid-container {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: minmax(100px, auto) minmax(100px, auto) minmax(100px, auto);
}

您可以使用任何值来指定最大大小，而不是auto。
我建议您看一下这两个链接，grid-template-rows和minmax()。