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

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

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

I'm not sure what to do to get this code to work.

score 161 · Accepted Answer · answered May 02 '17 at 21:07

161

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.

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.wrapper {
  display: grid;
  border-style: solid;
  border-color: red;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
  width: 100vw;
  height: 100vh;
}
.one {
  border-style: solid;
  border-color: blue;
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  border-style: solid;
  border-color: yellow;
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  border-style: solid;
  border-color: violet;
  grid-row: 2 / 5;
  grid-column: 1;
}
.four {
  border-style: solid;
  border-color: aqua;
  grid-column: 3;
  grid-row: 3;
}
.five {
  border-style: solid;
  border-color: green;
  grid-column: 2;
  grid-row: 4;
}
.six {
  border-style: solid;
  border-color: purple;
  grid-column: 3;
  grid-row: 4;
}

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

answered May 02 '17 at 21:07

NSTuttle

3,237
2
17
26

15

sadly, this won't work in the generic case, (i.e. if you don't know whether or not your container is at the top level or not) because vw and vh are relative to the window size regardless of how nested your grid is. – Michael Feb 11 '18 at 20:55
2

^ That is correct. This is for device width/height only, not nested containers stretching to full width/height of their parent. Nested containers will need appropriately sized parent containers with responsive CSS selectors such as % or ems for the children. – NSTuttle Feb 12 '18 at 16:00
1

Keep in mind this may not work as intended with scrollbars. Per [the spec](https://drafts.csswg.org/css-values-3/#vh), "However, any scrollbars are assumed not to exist." With scrollbars that appear *on top* of content, this isn't an issue, but with scrollbars that add space for the scrollbar (typical), `100vh` or `100vw` may cause unwanted scrolling in the other scroll direction if a scrollbar is present. Compare https://jsfiddle.net/mtgk7vbe/4/ (50vw and no horizontal scrollbar) and https://jsfiddle.net/mtgk7vbe/5/ (100w and a horizontal scrollbar). – 0b10011 Feb 14 '19 at 19:22
This works fine if you use vh on the body element only and percent from parent to child elements. – Florian G May 03 '19 at 20:04
1

know that vh units are broken on mobile devices. I'd recommend to never use vh units unless your are in a special situation (no mobile, controlled environment) https://nicolas-hoizey.com/articles/2015/02/18/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers/ – Kev May 14 '21 at 11:28
This adds unwanted scrollbars for me. In Chrome, at least, it seems to add any padding included in any nested elements at any level. Very, very frustrating. It's hard to believe I'm writing this in 2023 and we still can't get full height to work. – Dave Munger Feb 03 '23 at 23:58
@DaveMunger, ensure you are resetting the browser-implemented styles around HTML elements. Mainly, reset the padding/margin for all elements to 0 using the * selector. box-sizing: border-box can also help where you need to account for the space padding does use, when used, to prevent overflow. – NSTuttle Feb 05 '23 at 16:04
@NSTuttle I use a reset stylesheet that does all of that. – Dave Munger Feb 05 '23 at 20:11
@NSTuttle Also have tried border-box sizing. Still get the unwanted vertical scrollbar. – Dave Munger Feb 05 '23 at 20:11

score 17 · Answer 2 · answered Feb 21 '18 at 14:35

17

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.

answered Feb 21 '18 at 14:35

luukvhoudt

1,726
19
33

5

i'd say that this answer is incorrectly mixing older CSS approaches with new, where you should be looking to use the accepted answer's more up-to-date approach. and although this answer may _work_, it also adds coupling between the html + body elements and the element being styled, so I'd recommend against this approach. – Darren Shewry Aug 08 '18 at 09:36
Set width 100% as well – Cybernetic Jan 27 '22 at 04:17

Peter · Answer 3 · 2023-03-14T22:37:59.640

You can add the attribute position: fixed; top: 0; left: 0; right: 0; bottom: 0; to achieve a fixed position, and this solution will work on older browsers as well.

If you want to embed it, add position: absolute; to the wrapper and position: relative; to the div outside of the wrapper.

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

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

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

i'd say that this answer is incorrectly mixing older CSS approaches with new, where you should be looking to use the accepted answer's more up-to-date approach, and in fact may be undoing some of the CSS Grid functionality, so I'd recommend against this approach. — Darren Shewry, Aug 08 '18 at 09:37
@adarren This is the preferred method in the spec (from 2016): https://www.w3.org/TR/css-position-3/#abs-pos using `width` and `height` ends up the same result, but represent different kind of logic: using the `top 0 right 0....` method says: "I want this element to fill out the parent element", `width height` says "I want to this element has the same size than the parent element can contain" — Peter, Aug 09 '18 at 21:48
This works way better for me (on Firefox) than the accepted answer. The accepted answer gives me scroll bars and changes size relative to the main document. — tedtanner, Nov 08 '22 at 20:20

score -11 · Answer 4 · answered May 02 '17 at 21:07

-11

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

answered May 02 '17 at 21:07

Diogo Bernardelli

321
1
10

force css grid container to fill full screen of device

4 Answers4

Linked