* {
    box-sizing: border-box;
}
body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 8fr 1fr;
    grid-template-areas: 
        "header"
        "sidebar-1"
        "main"
        "sidebar-2";
    margin: 0 auto;
}
.box {
    border: 0px solid white;
}
@media (min-width: 421px) {
    .box {
        border: 5px solid white;
    }
    body {
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 1fr 8fr 1fr;
        grid-template-areas: 
            "header header"
            "sidebar-1 main"
            "sidebar-2 sidebar-2";
        margin: 0 auto;
    }
}
@media (min-width: 901px) {
    body {
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 1fr 8fr;
        grid-template-areas: 
            "header header header"
            "sidebar-1 main sidebar-2";
        margin: 0 auto;
    }
}
#header {
    grid-area: header;
    background-color: red;
    height: 300px;
}
#sidebar-1 {
    grid-area: sidebar-1;
    background-color: greenyellow;
}
#main {
    grid-area: main;
    background-color: blue;
}
#sidebar-2 {
    grid-area: sidebar-2;
    background-color: magenta;
}