The following code may seem a bit messy, but it demonstrates what I'm trying to achieve: having the nav element adjust its height based on its content, while the aside element extends down along with the main content.
However, if I remove the two somewhat unconventional grid-row declarations (spanning 998/999), the nav element also stretches to match the height of the aside element, which is not my desired outcome.
What would be a cleaner approach to achieving the desired layout?
div {
display: grid;
grid-template-columns: 60% 40%;
grid-template-areas: "main nav" "main aside";
text-align: center;
}
main {
grid-area: main;
background: silver;
line-height: 8;
grid-row: 1 / span 999;
}
nav {
grid-area: nav;
background: grey;
grid-row: 1;
}
aside {
grid-area: aside;
background: lightgray;
grid-row: 2 / span 998;
}<div>
<nav>nav: just a few links</nav>
<main>main:<br>very<br>long<br>content</main>
<aside>aside: short content</aside>
</div>