Html css网格下边缘的断头问题

我正在尝试设计我的网站。到目前为止，我做了所有的后端，现在我与前端斗争

到目前为止，我已经成功地在没有导航栏和页脚的情况下完成了一个简单的布局。它看起来就像我想象的那样，但有一部分让我很困扰，也无法解释原因：移动视图中的最后一个元素只是不想保持底部边框的边距

以下是我目前的代码：

<div class="container">

    <div class="grid">
        <div class="title">
            <span class="bold">
                <p>Edoardo Crescenti</p>
            </span>
            <span class="semibold">
                <p>.Net/C# Entwickler</p>
            </span>
        </div>
        <div class="item1 item">
            About me
        </div>
        <div class="item2 item">
            Ausbildung
        </div>
        <div class="item3 item">
            Arbeitserfahrung
        </div>
        <div class="item4 item">
            Portfolio
        </div>
        <div class="item5 item">
            Skills
        </div>
        <div class="item6 item">
            Sprachen
        </div>
        <div class="item7 item">
            Freizeit
        </div>
    </div>
</div>

我使用node/ejs，所以html代码只是包装在body标记中

---

我遗漏了什么？

使用百分比值作为

网格间距

会破坏网格高度，因为在这种情况下，它是

高度：自动

，而不是显式值。
一种解决方案是使用px，以便获得您想要的相似距离：

@media screen and (max-width: 699px)
.grid {
    height: auto;
    width: 95vw;
    margin: 2%;
    grid-template-rows: 100px 170px 170px 170px 170px 170px 170px 170px;
    grid-template-areas:
        "title"
        "item1"
        "item2"
        "item3"
        "item6"
        "item5"
        "item4"
        "item7";
    grid-gap: 25px;
    margin-bottom: 20px;
}

@media screen and (max-width: 699px)
.grid {
    height: auto;
    width: 95vw;
    margin: 2%;
    grid-template-rows: 100px 170px 170px 170px 170px 170px 170px 170px;
    grid-template-areas:
        "title"
        "item1"
        "item2"
        "item3"
        "item6"
        "item5"
        "item4"
        "item7";
    grid-gap: 25px;
    margin-bottom: 20px;
}