.container {
    display: grid;
    grid-template-columns: calc(var(--vw, 1vw) * 100);
    grid-template-rows: calc(var(--vh, 1vh) * 5) calc(var(--vh, 1vh) * 17) calc(var(--vh, 1vh) * 68) calc(var(--vh, 1vh) * 10);
    grid-template-areas:
        'header'
        'xxx'
        'navigation'
        'footer';
}

#header {
    grid-area: header;
}

#footer {
    grid-area: footer;
}

#navigation {
    grid-area: navigation;
}
#xxx {
    grid-area: xxx;
}