Как исправить область CSS Grid, используя grid-template-area?

Question

У меня есть рабочее решение, но я хотел бы знать, есть ли лучший способ сделать это.

У меня очень простой веб-дизайн. Верхний колонтитул, Контент, Нижний колонтитул. В теле у меня три ряда. На более широких экранах содержимое (оболочка) помещается в два столбца: nav и right_col.

body {
    grid-template-areas:"header" "nav content" "footer";
    height:100vh;
}

Поскольку я не хочу, чтобы колонка навигации двигалась при прокрутке, я исправил ее. Это выводит его за пределы сетки и нарушает макет ... при использовании grid-template-areas. Чтобы решить эту проблему, я использовал grid-template-columns и поместил right_col во второй столбец.

.wrapper {
    display:grid;
    grid-template-columns:1fr 4fr;
    overflow:auto;
    min-height:40em;
}
nav {
    position:fixed;
}
.right_col {
    grid-column-start:2;
}

Есть ли способ имитировать это поведение, используя только дескриптор grid-template-areas?

Я играл с sticky, но это, похоже, не помогает.

Вы можете посмотреть, как это выглядит здесь .