JSFiddle - React, Tailwind, and code Playground

by yshrkn

HTML

<body>
  <header>header</header>
  <nav>left</nav>
  <main>center</main>
  <aside>right</aside>
  <footer>footer</footer>
</body>

SCSS

html {
   background: #eee;
}

body {
  font-size: 2rem;
/*   width: 800px; */
  margin: 0 auto;
  min-height: 100vh;
  display: grid;
  grid-template:
    "..... ..... ..... ..... ...... ..... ....."
    "..... header header header header header ....." 100px
    "..... ..... ...... ..... ..... ..... ....."
    "..... left  ..... center ..... right ....."
    "..... ..... ..... ...... ..... ..... ....."
    "..... footer footer footer footer footer ....." 50px
    / auto 150px auto minmax(300px, 1fr) auto 200px auto;
 /*  gap: 10px; */
  
  > * {
    background: #ddd;
    border: 1px solid #000;
  }
}

header {
  grid-area: header;
}

main {
  grid-area: center;
}

aside {
  grid-area: right;
}

nav {
  grid-area: left;
}

footer {
  grid-area: footer;
}

@media screen and (max-width: 500px) {
  body {
    grid-template: 
    "header" 100px
    "center" 1fr
    "left"
    "right"
    "footer" 50px;
  }
}