title: Vuetify grid layout - How to fill height of element in grid
body: <p>I'm trying to create a grid layout but am having trouble. </p>
  
  <p>The layout I'm trying to create is attached in the image below. It's easier to show than explain.</p>
  
  <ul>
  <li>A side panel card layout that will be filled with a list of items. A</li>
  <li>2 element top panel.</li>
  <li>A big main panel to fill the remaining space
  underneath.</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/aveIJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/aveIJ.png" alt="Current Layout"></a></p>
  
  <p>Using the vuetify grid layout system, i've tried to get it but can't get it to nicely fill out all the space. My code is below. </p>
  
  <p>Is there a nice way to create this grid layout?</p>
  
  <pre><code>&lt;v-container fluid grid-list-md box&gt;
    &lt;v-layout row&gt;
  
      &lt;v-flex d-flex xs3&gt;
        &lt;v-layout row wrap&gt;
          &lt;v-card color="orange lighten-2" tile flat&gt;
            &lt;v-card-text&gt;{{ lorem.slice(0, 90) }}&lt;/v-card-text&gt;
          &lt;/v-card&gt;
  
          &lt;v-divider&gt;&lt;/v-divider&gt;
  
          &lt;v-card color="orange lighten-2" tile flat&gt;
            &lt;v-card-text&gt;{{ lorem.slice(0, 90) }}&lt;/v-card-text&gt;
          &lt;/v-card&gt;
  
          &lt;v-divider&gt;&lt;/v-divider&gt;
  
          &lt;v-card color="orange lighten-2" tile flat&gt;
            &lt;v-card-text&gt;{{ lorem.slice(0, 90) }}&lt;/v-card-text&gt;
          &lt;/v-card&gt;
  
          &lt;v-divider&gt;&lt;/v-divider&gt;
  
          &lt;v-card color="orange lighten-2" tile flat&gt;
            &lt;v-card-text&gt;{{ lorem.slice(0, 90) }}&lt;/v-card-text&gt;
          &lt;/v-card&gt;
        &lt;/v-layout&gt;
  
      &lt;/v-flex&gt;
  
      &lt;v-flex d-flex xs9&gt;
  
        &lt;v-layout row wrap&gt;
          &lt;v-layout row&gt;
            &lt;v-flex d-flex&gt;
              &lt;v-card color="blue-grey" dark tile flat&gt;
                &lt;v-card-text&gt;{{ lorem }}&lt;/v-card-text&gt;
              &lt;/v-card&gt;
            &lt;/v-flex&gt;
  
            &lt;v-flex d-flex&gt;
              &lt;v-card color="blue-grey" dark tile flat&gt;
                &lt;v-card-text&gt;{{ lorem }}&lt;/v-card-text&gt;
              &lt;/v-card&gt;
            &lt;/v-flex&gt;
          &lt;/v-layout&gt;
  
          &lt;v-layout row&gt;
            &lt;v-flex d-flex xs9&gt;
              &lt;v-card color="blue-grey" dark tile flat&gt;
                &lt;v-card-text&gt;{{ lorem }}&lt;/v-card-text&gt; 
              &lt;/v-card&gt;
            &lt;/v-flex&gt;
          &lt;/v-layout&gt;
        &lt;/v-layout&gt;
  
      &lt;/v-flex&gt;
    &lt;/v-layout&gt;
  &lt;/v-container&gt;
  </code></pre>