My grid container won't stretch fully in height, leaves a blank spot on bottom of page

I am creating a website with a main grid container that contains other nested grids.

It all works great except that the main grid container won’t strech fully in height.

Live demo here: https://dotocan1.github.io/admin-dashboard/
Code link: https://github.com/dotocan1/admin-dashboard

I attached the picture of the issue.

Some maybe important snippets:

CSS file:

body{
    min-height: 100vh;
    margin: 0;
}

#main-grid-container {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 0.1fr 1fr 1fr;
    background-color: #e2e8f0;
    align-content: stretch;   
}

I tried putting the .main-grid-container height to 100vh as well, but if I minimize the window, the grid breaks and I get a bad grid blowout.

>Solution :

To make the main grid container stretch fully in height, you can set the height of the HTML and body elements to 100% in addition to setting the height of the main grid container to 100vh.

Modify your CSS file as follows:

html, body {
    height: 100%;
    margin: 0;
}

#main-grid-container {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 0.1fr 1fr 1fr;
    background-color: #e2e8f0;
    height: 100vh;
    align-content: stretch;   
}

This should allow the main grid container to stretch fully in height while also ensuring that the grid layout does not break when the window is minimized.

You may also want to consider using the min-height property instead of height for the main grid container to prevent the grid from blowing out when the window is minimized. You can set the min-height property to a reasonable value based on the content of the grid.