So I am trying to create a responsive grid layout for all screen sizes. When the screen size is decreasing the content in the grid are overflowing vertically. It’s as if the height of the columns in the last row are decreasing as seen in the attached picture. Can anyone help me fix this?Image of inspect

HTML Code:

<div class="gridContainer">
            <div class="gridWrapper">
                <div class="mem" id="mem1"><img src="images/concrete/concrete-tall-1.jpg"></div>
                <div class="mem" id="mem2"><img src="images/concrete/concrete-wide-1.jpg"></div>
                <div class="mem" id="mem3"><img src="images/concrete/concrete-wide-2.jpg"></div>
                <div class="mem" id="mem4"><img src="images/concrete/concrete-wide-3.jpg"></div>
                <div class="mem" id="mem5"><img src="images/concrete/concrete-tall-2.jpg"></div>
                <div class="mem" id="mem6"><img src="images/concrete/concrete-wide-4.jpg"></div>
                <div class="mem" id="mem7"><img src="images/concrete/concrete-tall-3.jpg"></div>
                <div class="mem" id="mem8"><img src="images/concrete/concrete-wide-5.jpg"></div>
                <div class="mem" id="mem9"><img src="images/concrete/concrete-wide-6.jpg"></div>
            </div>
        </div>

CSS Code:

.gridContainer{
    background: #101010;
    width: 100%;
    padding: 10% 5%;
}
.gridWrapper{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 2%;
}
#mem1{
    grid-row: 1 / span 2;
}
#mem4{
    grid-column: 2;
    grid-row: 2;
}
#mem5{
    grid-column: 3;
    grid-row: 2 / span 2;
}
#mem7{
    grid-column: 2;
    grid-row: 3 / span 2;
}
.mem{
    padding: 2%;
    border: solid 1px white;
}
.mem > img{
    width: 100%; height: 100%;
    object-fit: cover;
}