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

_x000D_

.wrapper {_x000D_
  display: grid;_x000D_
  border-style: solid;_x000D_
  border-color: red;_x000D_
  grid-template-columns: repeat(3, 1fr);_x000D_
  grid-template-rows: repeat(3, 1fr);_x000D_
  grid-gap: 10px;_x000D_
}_x000D_
.one {_x000D_
  border-style: solid;_x000D_
  border-color: blue;_x000D_
  grid-column: 1 / 3;_x000D_
  grid-row: 1;_x000D_
}_x000D_
.two {_x000D_
  border-style: solid;_x000D_
  border-color: yellow;_x000D_
  grid-column: 2 / 4;_x000D_
  grid-row: 1 / 3;_x000D_
}_x000D_
.three {_x000D_
  border-style: solid;_x000D_
  border-color: violet;_x000D_
  grid-row: 2 / 5;_x000D_
  grid-column: 1;_x000D_
}_x000D_
.four {_x000D_
  border-style: solid;_x000D_
  border-color: aqua;_x000D_
  grid-column: 3;_x000D_
  grid-row: 3;_x000D_
}_x000D_
.five {_x000D_
  border-style: solid;_x000D_
  border-color: green;_x000D_
  grid-column: 2;_x000D_
  grid-row: 4;_x000D_
}_x000D_
.six {_x000D_
  border-style: solid;_x000D_
  border-color: purple;_x000D_
  grid-column: 3;_x000D_
  grid-row: 4;_x000D_
}

_x000D_

<html>_x000D_
<div class="wrapper">_x000D_
  <div class="one">One</div>_x000D_
  <div class="two">Two</div>_x000D_
  <div class="three">Three</div>_x000D_
  <div class="four">Four</div>_x000D_
  <div class="five">Five</div>_x000D_
  <div class="six">Six</div>_x000D_
</div>_x000D_
</html>

_x000D_

_x000D_ I'm not sure what to do to get this code to work. Any ideas/suggestions would be appreciated.

User · Accepted Answer

If you take advantage of width  100vw  and height  100vh   the object with these styles applied will stretch to the full width and height of the device   Also note  there are times padding and margins can get added to your view  by browsers and the like  I added a   global no padding and margins so you can see the difference  Keep this in mind    x000D   x000D     x000D    box-sizing  border-box  x000D    padding  0  x000D    margin  0  x000D    x000D   wrapper   x000D    display  grid  x000D    border-style  solid  x000D    border-color  red  x000D    grid-template-columns  repeat 3  1fr   x000D    grid-template-rows  repeat 3  1fr   x000D    grid-gap  10px  x000D    width  100vw  x000D    height  100vh  x000D    x000D   one   x000D    border-style  solid  x000D    border-color  blue  x000D    grid-column  1   3  x000D    grid-row  1  x000D    x000D   two   x000D    border-style  solid  x000D    border-color  yellow  x000D    grid-column  2   4  x000D    grid-row  1   3  x000D    x000D   three   x000D    border-style  solid  x000D    border-color  violet  x000D    grid-row  2   5  x000D    grid-column  1  x000D    x000D   four   x000D    border-style  solid  x000D    border-color  aqua  x000D    grid-column  3  x000D    grid-row  3  x000D    x000D   five   x000D    border-style  solid  x000D    border-color  green  x000D    grid-column  2  x000D    grid-row  4  x000D    x000D   six   x000D    border-style  solid  x000D    border-color  purple  x000D    grid-column  3  x000D    grid-row  4  x000D    x000D   lt html gt  x000D   lt div class  wrapper  gt  x000D     lt div class  one  gt One lt  div gt  x000D     lt div class  two  gt Two lt  div gt  x000D     lt div class  three  gt Three lt  div gt  x000D     lt div class  four  gt Four lt  div gt  x000D     lt div class  five  gt Five lt  div gt  x000D     lt div class  six  gt Six lt  div gt  x000D   lt  div gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

If you want the  wrapper to be fullscreen  just add the following in the wrapper class    position  absolute  width  100   height  100    You can also add top  0 and left 0

User · Answer

You can add position  fixed  with top left right bottom 0 attribute  that solution work on older browsers too   If you want to embed it  add position  absolute  to the wrapper  and position  relative to the div outside of the wrapper    x000D   x000D   wrapper   x000D    position  fixed  x000D    top  0  x000D    left  0  x000D    right  0  x000D    bottom  0  x000D   x000D    display  grid  x000D    border-style  solid  x000D    border-color  red  x000D    grid-template-columns  repeat 3  1fr   x000D    grid-template-rows  repeat 3  1fr   x000D    grid-gap  10px  x000D    x000D   one   x000D    border-style  solid  x000D    border-color  blue  x000D    grid-column  1   3  x000D    grid-row  1  x000D    x000D   two   x000D    border-style  solid  x000D    border-color  yellow  x000D    grid-column  2   4  x000D    grid-row  1   3  x000D    x000D   three   x000D    border-style  solid  x000D    border-color  violet  x000D    grid-row  2   5  x000D    grid-column  1  x000D    x000D   four   x000D    border-style  solid  x000D    border-color  aqua  x000D    grid-column  3  x000D    grid-row  3  x000D    x000D   five   x000D    border-style  solid  x000D    border-color  green  x000D    grid-column  2  x000D    grid-row  4  x000D    x000D   six   x000D    border-style  solid  x000D    border-color  purple  x000D    grid-column  3  x000D    grid-row  4  x000D    x000D   lt html gt  x000D   lt div class  wrapper  gt  x000D     lt div class  one  gt One lt  div gt  x000D     lt div class  two  gt Two lt  div gt  x000D     lt div class  three  gt Three lt  div gt  x000D     lt div class  four  gt Four lt  div gt  x000D     lt div class  five  gt Five lt  div gt  x000D     lt div class  six  gt Six lt  div gt  x000D   lt  div gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

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

Allow the body to grow as high as the content in it requires.
```
html { height: 100%; }
```
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.

[html] force css grid container to fill full screen of device

The answer is

Examples related to html

Examples related to css

Examples related to css-grid

Tags