如何将最大高度设置为 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

您可以通过限制溢出来解决问题，这会“强制”网格停留在其边界内。所以是这样的：

.grid-3x4 {
    overflow: hidden;
}

.grid-3x4 > div {
    overflow: hidden;
}

Answer 2

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

一种简单的方法是设置其中的每个单元格的最小和最大高度为 100vh（我用 10vh 做了示例，因此您无需滚动即可看到）：

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

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