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

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

一种简单的方法是将其中的每个单元格的最小和最大高度设置为 100vh（我使用 10vh 进行示例，这样您就可以在不滚动的情况下看到）：

.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';
}

.grid-3x4 > div {
  min-height: 10vh;
  max-height: 10vh;
  overflow: hidden;
}

<div class="grid-3x4">
  <div>Aasdfasasdfsadfsadfsadf asdfasddfsadf sadfsadfasdfasdf sadfsadfasdfasdf sadfsadfasdfasdf sadfsadfasdfasdf</div>
  <div>B</div>
  <div>C</div>
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

(also https://jsfiddle.net/ppvo9y32/2/ https://jsfiddle.net/ppvo9y32/2/)

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