CSS Grid stretch height and width to container

Question

I cant get the CSS Grid to stretch to its parents size for both height and width. The width will stretch just fine when setting it to 100%, but the height will stay at its initial size? Im not sure where the height size is being calculated.

When setting grid-template-rows to 25% for all rows, i assume that would give me the 100% height that i need, but its not working.

JSFiddle

body {
  margin: 10px;
  background-color: red;
  height: 100%;
}

.wrapper {
  display: grid;
  grid-gap: 1px;
  background-color: #fff;
  color: #444;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-columns: auto auto auto auto;
  grid-template-areas: 
    "a b c d" 
    "e f f g" 
    "h f f i" 
    "j k l m";
  height: 100%;
  width: 100%;
}

.box {
  background-color: #444;
  color: #fff;
  padding: 20px;
  font-size: 150%;
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}

.e {
  grid-area: e;
}

.f {
  grid-area: f;
}

.g {
  grid-area: g;
}

.h {
  grid-area: h;
}

.i {
  grid-area: i;
}

.j {
  grid-area: j;
}

.k {
  grid-area: k;
}

.l {
  grid-area: l;
}

.m {
  grid-area: m;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
  <div class="box i">I</div>
  <div class="box j">J</div>
  <div class="box k">K</div>
  <div class="box l">L</div>
  <div class="box m">M</div>
</div>

Solution 1

To following screen height, you can use viewport unit vh instead of px or %;

Sizing with CSS3's vw and vh units

body {
  background-color: red;
  height: 100%;
}

.wrapper {
  display: grid;
  grid-gap: 1px;
  background-color: #fff;
  color: #444;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-columns: auto auto auto auto;
  grid-template-areas: "a b c d" "e f f g" "h f f i" "j k l m";
  height: 100vh;
  width: 100%;
}

.box {
  background-color: #444;
  color: #fff;
  padding: 20px;
  font-size: 150%;
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}

.e {
  grid-area: e;
}

.f {
  grid-area: f;
}

.g {
  grid-area: g;
}

.h {
  grid-area: h;
}

.i {
  grid-area: i;
}

.j {
  grid-area: j;
}

.k {
  grid-area: k;
}

.l {
  grid-area: l;
}

.m {
  grid-area: m;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
  <div class="box i">I</div>
  <div class="box j">J</div>
  <div class="box k">K</div>
  <div class="box l">L</div>
  <div class="box m">M</div>
</div>

Solution 2

Try this, change the height from 100% to 100vh

.wrapper {
  display: grid;
  grid-gap: 1px;
  background-color: #fff;
  color: #444;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-columns: auto auto auto auto;
  grid-template-areas: "a b c d" "e f f g" "h f f i" "j k l m";
  height: 100vh;
  width: 100%;
}