Как переделать transition на grid?

let navClose = document.getElementsByClassName('nav_close')[0];
let nav = document.getElementsByClassName('nav_grid')[0];

navClose.addEventListener('click', function (e) {
    // nav.style.gridTemplateRows = 'repeat(1, 50px)'
    nav.classList.toggle('nav_grid_toggle')
});

#nav {
    display: grid;
    position: relative;
}
.nav_close {
    position: absolute;
    top: 0;
    right: 0;
}
.nav_grid {
    height: 200px;
    max-height: 600px;
/*     display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows:minmax(200px, auto); */
    grid-gap: 20px;
    background: crimson;
    transition: all .5s linear;
}
.nav_grid_toggle {
    max-height: 50px;
/*     grid-template-rows:minmax(200px, auto); */
}

<div id="nav">
  <div class="nav_close">
    <span>закрыть</span>
  </div>
  <div class="nav_grid">текст</div>
</div>