Help using grid

Please consider the code in this pen:

I don’t know why the gap at the end of the rows gets added, when i used the grid inspector, i’ve noticed that there is line with smaller dashes at the end of the last gap(vertically), can someone explain what is that line?

The Line Conventions

If you take a closer look at the lines crossing and surrounding the grid, you’ll notice that they have different styles. The convention used with these lines will help you to understand how elements are placed inside the grid.

The continuous line marks where the grid starts and ends. Notice that there is a continuous line at both sides and on top of the grid, but there’s no continuous line closing the grid container at the bottom.
The diagonal lines to left and right correspond to the horizontal and vertical gap between grid items (grid areas).
The long-dashed line limits the tracks that have been explicitly defined through the (in this case the columns).
The dotted line corresponds to the tracks that are being defined in an implicit way by the browser (in this case the rows)

for more info visit here:

If there are more grid items than cells in the grid or when a grid item is placed outside of the explicit grid, the grid container automatically generates grid tracks by adding grid lines to the grid. The explicit grid together with these additional implicit tracks and lines forms the so called implicit grid .

by adding grid lines to the grid

↑↑↑ they are those lines with smaller dashes ( they are called here “The dotted line”)

And the problem that you has is that you have 26 grid childs, but the grid is 5x5, which means it has only 25 places, remove one grid child div and the gap will go away