force css grid container to fill full screen of device

Question

How do I force a css grid container take the full width and height of the device screen for a single page app? Modified example is from Mozilla: Firefox documentation

Answer 1

Two important CSS properties to set for full height pages are these:

1. Allow the body to grow as high as the content in it requires.

   html { height: 100%; }
   

2. Force the body not to get any smaller than then window height.

   body { min-height: 100%; }
   

What you do with your gird is irrelevant as long as you use fractions or percentages you should be safe in all cases.

Have a look at this common dashboard layout.