Grid layout - With header/footer and growing nav/main/aside sections ('holy grail' layout)

[MartijnHarmenzon]

I am trying to create a dashboard with the new Tailwind Grid functionality. In the end it would look like the image below. Where the nav, main and aside will grow to a full height (h-full). The header and footer will have a max-height.

The code I am using at the moment is the following:

<div class="grid grid-rows-3 grid-cols-12 gap-2 h-screen bg-gray-100">
  <header class="row-auto col-span-12 bg-gray-300">
    <!-- Header content -->
    Header...
  </header>

  <nav class="col-span-1 bg-gray-400">
    <!-- Navigation -->
    Nav...
  </nav>

  <main class="col-span-8 bg-gray-500">
    <!-- Main content -->
    Main...
  </main>

  <aside class="col-span-3 bg-gray-600">
    <!-- Sidebar / Ads -->
    Aside...
  </aside>

  <footer class="row-auto col-span-12 bg-gray-300">
    <!-- Footer content -->
    Footer...
  </footer>
</div>

And a Codepen:
https://codepen.io/martijnharmenzon-the-looper/pen/vYOEGRQ

Any suggestions how to make the nav, main and aside grow? Much appreciated.