I've tried many height adjustments of my Nav and Content but nothing makes it fill out the remaining space to the bottom of the page. Each row ends where the content ends...
What I am trying to achieve
How it looks now
Doesn't the auto property supposed to sort out last rows height?
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px auto;
grid-template-areas: ". ." ". .";
}
nav {
grid-row-start: 2;
grid-row-end: 3;
}
main {
grid-row-start: 2;
grid-row-end: 3;
}<div class="grid-container">
<header>Header</header>
<nav>Nav</nav>
<main>Content</main>
</div>
