title: How to override grid-template-areas
body: <p>How can I make a div that overrides all the template areas and goes to the front, so that the item6 will be displaying in front of all the other items.</p>
  <p>I tried to with grid-row-start and grid-row-end but it doesn't seem to work</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  .item1 { grid-area: header; }
  .item2 { grid-area: menu; }
  .item3 { grid-area: main; }
  .item4 { grid-area: right; }
  .item5 { grid-area: footer; }
  .item6 { grid-row-start: 0;
           grid-row-end: 6}
  .grid-container {
    display: grid;
    grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
  
  .grid-container &gt; div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="grid-container"&gt;
    &lt;div class="item1"&gt;Header&lt;/div&gt;
    &lt;div class="item2"&gt;Menu&lt;/div&gt;
    &lt;div class="item3"&gt;Main&lt;/div&gt;  
    &lt;div class="item4"&gt;Right&lt;/div&gt;
    &lt;div class="item5"&gt;Footer&lt;/div&gt;  
    &lt;div class="item6"&gt;Override everything&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>