How to set max height to a CSS grid

Question

I have the following CSS grid:

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

I want the grid to have a fixed height of 100vh, despite the content of the template areas. I tried to insert:

max-height : 100vh;

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?

Answer 1

max-height (maximum height) sets a limit on the height of a container. You need to set a min-height (minimum height) to force a container to always have that minimum height.

A simple way to do is just to set that every cell within has a minimum and maximum height of 100vh (I did the example with 10vh so you could see without scrolling):

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

You should also set an overflow (for example, overflow: hidden) to control what happens when the content goes out of the boundaries of the cell.