Second and subsequent rows don't have specified full height in the grid

I'm a back-end programmer asked to do a simple project, so I'm struggling to grasp the concept of CSS grid

The first row have a full height of 100px as specified in grid-template-rows, while starting from second they are collapsed to only include the content. What am I missing?

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-template-rows: repeat(auto-fill, 100px);

    grid-column-gap: 2rem;
    grid-row-gap:    6rem;

}
.projects-grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #457b9d;
    border-radius: 3px;
}

<div class="projects-grid">
    <div id="add" class="projects-grid-item">＋</div>

    <div class="projects-grid-item">
        <a href="/project/list">Проект 1 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">ащщ </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo2 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo3 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo4 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo5 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo6 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo7 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo7 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo8 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo11 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo11 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo12 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo12 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo13 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo13 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo14 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo15 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo16 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">Проект 100500 </a>
    </div>

</div>

Solution

You need to use grid-auto-rows which will define the size of all the implicit rows

The grid-auto-columns and grid-auto-rows properties specify the size of tracks not assigned a size by grid-template-rows or grid-template-columns.^ref

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-auto-rows:  100px;

    grid-column-gap: 2rem;
    grid-row-gap:    6rem;

}
.projects-grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #457b9d;
    border-radius: 3px;
}

<div class="projects-grid">
    <div id="add" class="projects-grid-item">＋</div>

    <div class="projects-grid-item">
        <a href="/project/list">Проект 1 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">ащщ </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo2 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo3 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo4 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo5 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo6 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo7 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo7 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo8 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo11 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo11 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo12 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo12 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo13 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo13 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo14 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo15 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">foo16 </a>
    </div>

    <div class="projects-grid-item">
        <a href="/project/list">Проект 100500 </a>
    </div>

</div>