如何使用grid-template-areas修复CSS Grid区域？

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，但这似乎无济于事。

您可以查看here的外观。