title: CSS Grid Layout with full height on IE
body: <p>I started using CSS Grid Layout by great Rachel Andrews and I cant figure out, how can I stretch wrapper. I am using her first example from book <em>Get Ready for CSS Grid Layout</em> with a little modification - <strong>full height</strong>.</p>
  
  <p>It works perfect on Chrome, FF, Safari, Opera - but it doesn't fill full height on IE. I am using IE prefixes for grid system (<code>-ms-</code>) and everything works but not full height.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
    display: grid;
    display: -ms-grid;
    grid-template-columns: 12px calc(50vw - 18px) 12px calc(25vw - 18px) 12px calc(25vw - 12px) 12px;
    -ms-grid-columns: 12px calc(50vw - 18px) 12px calc(25vw - 18px) 12px calc(25vw - 12px) 12px;
    grid-template-rows: 12px auto 12px auto 12px;
    -ms-grid-rows: 12px auto 12px auto 12px;
    background-color: #fff;
    color: #444;
    height: 100vh;
  }
  
  .box {
    background-color: rgb(120, 70, 123);
    border: 5px solid rgb(88, 55, 112);
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font: 150%/1.3 Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif;
  }
  
  .a {
    grid-column: 2 / 3;
    grid-row: 2 / 5;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    -ms-grid-row: 2;
    -ms-grid-row-span: 3;
  }
  
  .b {
    grid-column: 4 / 7;
    grid-row: 2 / 3;
    -ms-grid-column: 4;
    -ms-grid-column-span: 3;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
  }
  
  .c {
    grid-column: 4 / 5;
    grid-row: 4 / 5;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
  }
  
  .d {
    grid-column: 6 / 7;
    grid-row: 4 / 5;
    -ms-grid-column: 6;
    -ms-grid-column-span: 1;
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="box a"&gt;A&lt;/div&gt;
    &lt;div class="box b"&gt;B&lt;/div&gt;
    &lt;div class="box c"&gt;C&lt;/div&gt;
    &lt;div class="box d"&gt;D&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Also there is working jsfiddle</strong>: <a href="https://jsfiddle.net/v7d641jb/" rel="nofollow noreferrer">https://jsfiddle.net/v7d641jb/</a></p>
  
  <p>(if you want to check the whole example its here <a href="http://legie.kirril.com/www/grid/index.html" rel="nofollow noreferrer">http://legie.kirril.com/www/grid/index.html</a>)</p>