body{
  display: grid;
  grid-template-areas:
    "header header"
    "nav nav"
    "sidebar section"
    "sidebar article"
    "footer footer";
  grid-template-columns: minmax(200px, 1fr) 2fr;
  grid-template-rows: auto auto 1fr 1fr auto;
}

@media (max-width: 768px) {
    body {
        grid-template-areas:
    "header"
    "nav"
    "sidebar"
    "section"
    "article"
    "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}

header
{
    grid-area: header;
    background-color: aqua;
}

footer
{
    grid-area: footer;
    background-color: wheat;
}

aside {
    grid-area: sidebar;
    background-color: chocolate;
}
section
{
    grid-area: section;
    background-color: coral;
}
article
{
    grid-area: article;
    background-color: pink;
}