JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <aside>
    <h5>aside</h5>
  </aside>
  <header>
    <h5>hdr</h5>
  </header>
  <section>
    <h5>s1</h5>
  </section>
  <section>
    <h5>s2</h5>
  </section>
  <section>
    <h5>s3</h5>
  </section>
  <main>
    <h5>main</h5>
  </main>
  <footer>
    <h5>ftr</h5>
  </footer>
</body>

CSS

body {
    margin: 0;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(5, auto); /* CORRECTION */
    grid-template-areas:
        "sect1"
        "sect2"
        "sect3"
        "main"
        "footer";
}

aside {
    grid-area: sidebar;
    background-color: #007FFF;
}

header {
    grid-area: header;
    background-color: #91C8FF;
    display: none; /* NEW */
}

section:nth-of-type(1) {
    grid-area: sect1;
    background-color: #B3D8FD;
}
section:nth-of-type(2) {
    grid-area: sect2;
    background-color: #5E86AF;
}
section:nth-of-type(3) {
    grid-area: sect3;
    background-color: #6D9FD2;
}
main {
    grid-area: main;
    background-color: #7DA9D5;
}

footer {
    grid-area: footer;
    background-color: #588EC3;
}

@media only screen and (min-width: 768px) {

    body {
        margin: 0;
        display: grid;
        grid-template-columns: auto 27% 27% 27%;
        grid-template-rows: 8% 30% auto 10%;
        grid-template-areas:
            "sidebar header header header"
            "sidebar sect1  sect2  sect3"
            "sidebar main   main   main"
            "sidebar footer footer footer";
    }
    header { display: block; } /* NEW */

}

body, html {
    height: 100vh;
}