How to remove empty white space at the bottom of grid? [closed]

I have tried using auto and 1fr for the last value of grid-template-rows but it did not work for me screenshot I have applied grid in and have styled it with margin:0 and padding:0

    header{
        grid-area: header;
    }

    #headingImage{
        grid-area: headingImage;
    }

    .container{
        grid-area: container;
    }

    .mainContent{
        grid-area: mainContent;
    }

    .formContainer{
        grid-area: formContainer;
    }

    footer{
        grid-area: footer;
    }
    body{
        display: grid;
        grid-template-areas:
            "header header"
            "headingImage headingImage"
            "container container"
            "mainContent mainContent"
            "formContainer formContainer"
            "footer footer";
        grid-template-rows: auto auto auto auto auto auto;
    }