How to fix a CSS Grid area using grid-template-areas?

Question

I have a working solution but I'd like to know if there's a better way to do it.

I have a very simple web design. Header, Content, Footer. In the body, I have three rows. On wider screens, the content (wrapper) gets put in two columns, nav and right_col.

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

As I don't want the nav column to move when scrolling, I have made it fixed. This puts it outside the grid and breaks the layout ... when using grid-template-areas. To solve this, I have used grid-template-columns and have put the right_col at the second column.

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

Is there a way to mimic this behavior using only the grid-template-areas descriptor?

I've played around with sticky, but this doesn't seem to help.

You can check-out how it looks here.