body {
    display: grid;
    grid: auto-flow min-content / 1fr;
    grid-template-areas: "header"
                         "left-sidebar"
                         "main  "
                         "bottom-nav  "
                         "footer";
    grid-gap: 1em;
    margin: 1em;
}

@media screen and (min-width: 475px) {
    body {
        grid: auto-flow min-content / 2fr 1fr;
        grid-template-areas: "header header"
                             "left-sidebar main"
                             "bottom-nav   bottom-nav  "
                             "footer footer";
    }
}

@media screen and (min-width: 650px) {
    body {
        grid: auto-flow min-content / 1fr 2fr;
        grid-template-areas: "header header"
                             "left-sidebar main  "
                             "bottom-nav   bottom-nav  "
                             "footer footer";
    }
}

header { grid-area: header; }
.left-sidebar { grid-area: left-sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }

.bottom-nav {
    grid-area: bottom-nav;
}