header
center

gridレイアウト

body {
    font-size: 2rem;
    width: 800px;
    margin: 0 auto;
    min-height: 100vh;
    display: grid;
    grid-template:
        "... ...... ...... ...... ...... ...... ..."
        "... header header header header header ..." 150px
        "... ...... ...... ...... ...... ...... ..."
        "... left   ...... center ...... right  ..." 1fr
        "... ...... ...... ...... ...... ...... ..."
        "... footer footer footer footer footer ..." 300px
        "... ...... ...... ...... ...... ...... ..."
        / auto 150px auto minmax(300px, 500px) auto 200px auto;
}
header {
    grid-area: header;
    background: #888;
}
main {
    grid-area: center;
    background: #bbb;
}
nav {
    grid-area: left;
    background: #ccc;
}
aside {
    grid-area: right;
    background: #ddd;
}
footer {
    grid-area: footer;
    background: #aaa;
}
@media screen and (max-width: 1000px) {
    body {
        grid-template:
            "header" 150px
            "center" 1fr
            "left  "
            "right "
            "footer" 300px;
    }
}