如何将最大高度设置为 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 类，但不起作用。我还尝试将网格包装在另一个类中，在包含类上设置最大高度，但没有运气。我怎样才能做到这一点？

Answer 1

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

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

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

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