How to remove css-grid gutter from outer edge of a row

Question

I am currently working to replicate a design and I am using css grid for the layout. I applied the css gap attribute and gutters were created between the rows and columns. However, a gutter was created outside the last row and I have been battling to fix it. from what I know about grid gap and also from css Tricks,the gutters are only created between the columns/rows, not on the outer edges. Following is a screenshot of how it looks like after my implementation current look You can notice the gutter at the bottom of the last row on the right. I do not want the gutter there, I just want the row to take up the space at the bottom. This is the code for the grid container.

.App {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    width: 70%;
    height: 55%;
    background-color: var(--pry-blue);
}