Image overlapping in css grid-template-areas div

I have 6 images that I want to align with grid-template-areas. The problem is when I set one image to cover a bigger grid-area, the next image does not move to the next grid area but overlaps the bigger image. css as below.

.image-gallery{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 40rem;
    grid-gap:1.5rem;
    grid-template-areas:
                'img-1 img-2 img-3'
                'img-4 img-5 img-3'
                'img-6 img-6 img-6'
           


 
              
               
}

.img-1{

    grid-area: img-1;
    background-image: url("./gallery/artefacts/nyungu.jpg");

}

.img-2{
    
    grid-area: img-2;
    background-image: url("./gallery/artefacts/itimu.jpeg");

}

.img-3{
    min-height: 71.5rem;
    grid-area: img-3;
    background-image: url("./gallery/artefacts/ndome2.jpeg");

}

.img-4{
  
    grid-area: img-4;
    background-image: url("./gallery/artefacts/kiondo.jpeg");
    
}
.img-5{
   
    grid-area: img-5;
    background-image: url("./gallery/artefacts/mwatu.jpeg");

}

.img-6{
   
    min-height: 40rem;
    grid-area: img-6;
    background-image: url("./gallery/artefacts/njora.jpeg");

}

Now one img-6 goes to the place I have already put img-3. below is the html.

       <div class="image-gallery">   


            <div  >
                <a href="./gallery/artefacts/nyungu.jpg" class="img-1">1
                    <i class="icon ion-md-expand">1</i> 
                    
                </a>

                <p class="caption">Lorem ipsum dolor sit amet.</p>
                
            </div>
            <div  >
                <a href="./gallery/artefacts/itimu.jpeg" class="img-2">2
                    <i class="icon ion-md-expand">2</i> 
                </a>
                <p class="caption">Lorem ipsum dolor sit amet consectetur.</p>
            </div>
            <div  >
                <a href="./gallery/artefacts/ndome2.jpeg" class="img-3">3
                    <i class="icon ion-md-expand">3</i> 
                </a>
                <p class="caption">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, 
                    iusto? Veritatis quibusdam, modi provident impedit laboriosam, suscipit voluptatibus, 
                   .</p>
            </div>
            <div  >
                <a href="./gallery/artefacts/kiondo.jpeg" class="img-4">4
                    <i class="icon ion-md-expand">4</i> 
                </a>
                <p class="caption">Lorem ipsum dolor sit amet consectetur adipisicing.</p>
            </div>
            <div  >
                <a href="./gallery/artefacts/mwatu.jpeg" class="img-5">5
                    <i class="icon ion-md-expand">5</i> 
                </a>
                <p class="caption">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti.</p>
            </div>
            <div  >
                <a href="./gallery/artefacts/njora.jpeg" class="img-6">6
                    <i class="icon ion-md-expand">6</i> 
                </a>
                <p class="caption">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti.</p>
            </div>      

        </div>

Kindly assist me solve the above problem . note img-3 is height is taller than all the other images.

I tried the minmax for grid height to see if it would adjust but the result was now all img-6 were pushed downwards leaving and empy space

You need to sign in to view this answers