Basic responsive layout with header, main, footer whereas main has 3 columns and responsive main content

layout.html

<div class="flex flex-col h-screen w-screen">
  <header class="p-4 bg-blue-100 flex flex-row space-x-4">
    <span class="w-20 text-center">logo</span>
    <span>link 1 </span>
    <span>link 2 </span>
  </header>
  <div class="flex-grow flex flex-row">
    <aside class="w-64 bg-blue-200 hidden lg:flex items-center justify-center">sidebar left</aside>
    <main class="flex-grow bg-blue-300">
      <div class="grid grid-flow-row sm:grid-cols-4 gap-4 p-8">
        <div class="rounded-md shadow-md bg-blue-200 p-8">card content</div>
        <div class="rounded-md shadow-md bg-blue-200 p-8">card content</div>
        <div class="rounded-md shadow-md bg-blue-200 p-8">card content</div>
        <div class="rounded-md shadow-md bg-blue-200 p-8">card content</div>
        <div class="rounded-md shadow-md bg-blue-200 p-8">card content</div>
        <div class="rounded-md shadow-md bg-blue-200 p-8">card content</div>
        <div class="rounded-md shadow-md bg-blue-200 p-8">card content</div>
        <div class="rounded-md shadow-md bg-blue-200 p-8">card content</div>
        <div class="rounded-md shadow-md bg-blue-200 p-8">card content</div>
        <div class="rounded-md shadow-md bg-blue-200 p-8">card content</div>
      </div>
    </main>
    <aside class="w-64 bg-blue-200 hidden lg:flex items-center justify-center">sidebar right</aside>
  </div>
  <footer class="p-4 bg-blue-100 flex flex-row space-x-4">
    <span class="w-20 text-center">footer</span>
  </footer>
</div>