My approach to structuring the layout using CSS grid is as follows:
nav content
nav footer
This means that the 'nav' will occupy the entire height of the page with a specified width, and the remaining space will be divided between the 'content' and 'footer'.
To implement this, I have defined the necessary variables:
$nav-width: 8.75rem;
$navbar-height: 6.125rem;
$footer-height: 6.438rem;
.auth-grid {
display: grid;
grid-template-rows: 1fr $footer-height;
grid-template-columns: $nav-width 1fr;
grid-template-areas: 'nav content' 'nav footer';
}
nav {
grid-area: nav;
}
main {
grid-area: content;
}
footer {
grid-area: footer;
}
However, when implementing this grid structure, I encountered an unexpected issue where a third row was being rendered. How can I adjust the grid to ensure that the 'nav' fills the entire height, while the remaining space is correctly divided between the 'content' and 'footer' columns?