title: How to set max height to a CSS grid
body: <p>I have the following CSS grid:</p>
  
  <pre><code>.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';
      }
  </code></pre>
  
  <p>I want the grid to have a fixed height of 100vh, despite the content of the template areas.
  I tried to insert:</p>
  
  <pre><code>max-height : 100vh;
  </code></pre>
  
  <p>to the .grid-3x4 class but is not working.
  I also tried to wrap the grid inside another class, setting the max-height on the containing class but no luck. How can I do this?</p>