I am suprised that I cannot figure out a simple CSS3 grid system even though I may have used it so many times. Here is my scenario:

I want all grid items to be of a specific height, say 120px. The grid container has a fixed height, say 500px and should scroll vertically on items overflow.

The issue I am having is the spacing between the grid item. Though I have set the gap to 10px, the second item row has more spacing that set, and so forth.

What I tried to do:

1. I have removed the specific grid item height but then it fills the entire grid container's height.
2. I have set the item height, populated with grid items, say 20, and the griding works as expected, but this only works if there are many items in the grid container. If there are few, say 2 rows, the issues appears.

What i want to achieve: I want the grid-gap to be applied correctly whether there is one row or several rows and at the same time allow vertical scrolling.

Note: The number of grid items is dynamic

I may be missing a very simple property, so please advice me.

Here is the screenshots of what I am facing and the simple css code I have made.

I will appreciate advice on this.

HTML (Razor Component):

<div class="grid-container">
    @for (int i = 0; i < 20; i++)
    {
        <div class="item">
            Item data
        </div>
    }
</div>

CSS:

.grid-container{
    display:grid;
    gap:10px;
    padding:22px;
    height:500px;
    overflow-y:scroll;
    grid-template-columns:repeat(4, 1fr);
}
.item{
    height:120px;
    padding:20px;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}