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

Question

我有以下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类但不起作用。 我还尝试将网格包装在另一个类中，在包含类上设置max-height但没有运气。我怎么能这样做？

Answer 1

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

一个简单的方法就是设置每个单元格的最小和最大高度为100vh（我用10vh做了示例，所以你可以看到没有滚动）：

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

您还应该设置overflow（例如overflow: hidden）来控制当内容超出单元格边界时会发生什么。