如何最大高度设置为CSS网格

我有以下的CSS格：如何最大高度设置为CSS网格

.grid-3x4 { 
     display: grid; 
     grid-template-columns: 1fr 1fr 1fr; 
     grid-template-rows: 1fr 1fr 1fr 1fr; 
     grid-template-areas: 
     'a b c ' 
     'd e f' 
     'g h i' 
     'l m n'; 
    }

我希望网格有100vh固定的高度，尽管模板领域的内容。我试图插入：

max-height : 100vh;

到.grid-3X4类，但不工作。我也尝试将网格包裹在另一个类中，在包含类上设置最大高度，但没有运气。我怎样才能做到这一点？

来源

2017-10-12 Matteo Boscolo

那么'='它永远不会在任何东西上工作... – CBroe

@cbroe固定，对不起 –

max-height（最大高度）设置容器高度的限制。您需要设置一个min-height（最小高度）来强制容器始终具有最小高度。

一个简单的方法做的只是设置每个细胞内有一个最小和100vh的最大高度（我做了10vh的例子，所以你可以看到无需滚动）：

https://jsfiddle.net/ppvo9y32/2/

你还应该设置一个overflow（例如，overflow: hidden）来控制内容超出单元格边界时发生的情况。

来源

2017-10-12 00:24:23

这不是我正在做的不幸的事情。当您插入比单个字母更大的文本时，网格的各个部分会在最小高度上不断扩大。 –

所以如果我想要一个100vh的高度并且我有4个fr，那么每个fr都必须有一个最小高度和25vh的最大高度。现在正在工作，我会在我的项目上广泛尝试。 –

如何最大高度设置为CSS网格

回答

相关问题