title: Creating overlay in CSS-Grid
body: <p>I am trying to create an overlay in CSS3 grid but I can't seem to figure out how I can go about achieving it. I have searched online but haven't found anything of help. I want to achieve something like below:</p>
  
  <p><a href="https://i.stack.imgur.com/sGhX6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sGhX6.png" alt="enter image description here"></a></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>body {
    margin: 0;
    padding: 0;
  }
  
  .wrapper {
    display: grid;
    grid-template-rows: 1f;
      width: 100vw;
      height: 100vh; 
      grid-template-areas:
        "a"
        "b"
        "c";
   }
  
  .box {
    background-color: #444;
    color: #fff;
  }
  
  .a {
    grid-area: a;
  }
  
  .b {
    grid-area: b;
  }
  
  .c {
    grid-area: c;
  }</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&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is a link to codepen: <a href="https://codepen.io/anon/pen/PROVeY" rel="nofollow noreferrer">https://codepen.io/anon/pen/PROVeY</a>   </p>
  
  <p>Edited:</p>
  
  <p>How to place div on left and right side overlay against the larger div behind it in CSS3 grid-layout
  <a href="https://i.stack.imgur.com/EPrJj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EPrJj.png" alt="enter image description here"></a></p>
  
  <pre><code> body {
        margin: 0;
        padding: 0;
      }
  
      .wrapper {
              display: grid;
              grid-template-rows: 1f;
          width: 100vw;
          height: 100vh; 
          grid-template-areas:
            "a"
            "b"
            "c";
          }
  
      .box {
        background-color: #444;
        color: #fff;
      }
  
      .a {
        grid-area: a;
      }
  
      .b {
        grid-area: b;
      }
  
      .c {
        grid-area: c;
      }
      .D {
        grid-area: D;
      }
  
  
      &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;C&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>