title: CSS Display in Grid or table
body: <p>Hi Guys I need help displaying layout in CSS. Here is i want the layout to display like.</p>
  
  <p><a href="https://i.stack.imgur.com/HCIJ0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HCIJ0.png" alt="enter image description here"></a> </p>
  
  <p>Here is what i have so far in CSS but can't get the menu zone to fully expand down height. Any suggestions? i'm using display grid as layout.</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>.page{
    display: grid;
    grid-template-columns:29% 71%;
    justify-content: flex-start;
    align-content: start; 
  }
  .section-header{
   grid-column: 1/3;
   display:grid
   grid-row:row;
   background-color:blue;
   color:#fff;
  }
  .zone-menu-wrapper{
  grid-row:1/3;
  background-color:#286dc5;
  }
  .zone-topper-wrapper{
  grid-row:1/3;
  }
  .section-main{
   grid-column:2/3;
   background-color:orange;
  }
  .section-footer{
    grid-column: 2/3;
    background-color:yellow;
  }
  .zone-branding-wrapper{
    grid-column:2/3;
  }
  
  .zone-menu{
  width:29%;
  display:inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="page"&gt;
   &lt;header class="section-header"&gt;
    &lt;div class="zone-topper-wrapper"&gt;Top Zone&lt;/div&gt;
    &lt;div class="zone-menu-wrapper"&gt;Menu Zone&lt;/div&gt;
   &lt;/header&gt;
   &lt;main class="section-main"&gt;
      &lt;div class="zone-branding-wrapper"&gt;Branding Zone&lt;/div&gt;
    &lt;div class="zone-content-wrapper"&gt;Content Zone&lt;/div&gt;
   &lt;/main&gt;
   &lt;footer class="section-footer"&gt;
    &lt;div class="zone-footer-wrapper"&gt;Footer Zone&lt;/div&gt;
   &lt;/footer&gt;
  &lt;/div&gt;
  &lt;/pre&gt;</code></pre>
  </div>
  </div>
  </p>