headbreaking problems with bottom margins css grid

Question

Im trying to design my website. Sofar i did all the backend and now im struggling with the frontend.

sofar i've managed to do a simple layout without a navbar and a footer. It already looks as i have imagined it layoutwise, but there is a part where it bothers me a lot and cant fiugre out why: the last element in the mobile view just doesnt want to keep a margin from the bottom border.

heres my code so far:

<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>

and the stylesheet

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

body {
  background: #979395;
  font-size: 14px;
  line-height: 22px;
  color: black;
  font-family: "Roboto", sans-serif;
}
.item {
  padding: 1%;
  font-size: 1.5rem;
  text-align: center;
}
.container {
  width: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-bottom: 10px;
}
.title {
  grid-area: title;
  font-size: 2rem;
  width: 80vw;
  margin: 5% auto;
  align-self: flex-end;
  width: 100%;
}
.grid {
  width: 80vw;
  height: 90vh;
  max-width: 1000px;
  margin-bottom: 5%;
  align-self: center;
  display: grid;
}
.item1 {
  grid-area: item1;
  box-shadow: 4px 0px 5px 3px rgba(0, 0, 0, 0.18);
  background-color: #f7bc68;
  border-color: #120505;
  border-style: solid;
  border-width: 1px;
}
.item2 {
  grid-area: item2;
  box-shadow: 4px 0px 5px 3px rgba(0, 0, 0, 0.18);
  background-color: #120505;
  color: #ffffff;
  border-color: #120505;
  border-style: solid;
  border-width: 1px;
}
.item3 {
  grid-area: item3;
  box-shadow: 4px 0px 5px 3px rgba(0, 0, 0, 0.18);
  background-color: #ffffff;
  border-color: #120505;
  border-style: solid;
  border-width: 1px;
}
.item4 {
  grid-area: item4;
  box-shadow: 4px 0px 5px 3px rgba(0, 0, 0, 0.18);
  background-color: #ffffff;
  border-color: #120505;
  border-style: solid;
  border-width: 1px;
}
.item5 {
  grid-area: item5;
  box-shadow: 4px 0px 5px 3px rgba(0, 0, 0, 0.18);
  background-color: #ffffff;
  border-color: #120505;
  border-style: solid;
  border-width: 1px;
}
.item6 {
  grid-area: item6;
  box-shadow: 4px 0px 5px 3px rgba(0, 0, 0, 0.18);
  background-color: #9e2020;
  border-color: #120505;
  border-style: solid;
  border-width: 1px;
}
.item7 {
  grid-area: item7;
  box-shadow: 4px 0px 5px 3px rgba(0, 0, 0, 0.18);
  background-color: #508e83;
  border-color: #120505;
  border-style: solid;
  border-width: 1px;
}

@media screen and (min-width: 1050px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 0.5fr 1fr 1fr 1fr;
    grid-template-areas:
      "title title title title"
      "item1 item1 item2 item3"
      "item4 item4 item5 item6"
      "item7 item7 item5 item6";
    grid-gap: 0.5%;
  }
}
@media screen and (max-width: 1049px) and (min-width: 700px) {
  .grid {
    height: 90vh;
    grid-template-areas:
      "title title"
      "item1 item1"
      "item2 item3"
      "item2 item4"
      "item5 item6"
      "item5 item6"
      "item7 item7";
    grid-gap: 1%;
  }
}
@media screen and (max-width: 699px) {
  .titltle {
    display: none;
  }
  .container {
    justify-content: space-around;
  }
  .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: 1%;
    margin-bottom: 20px;
  }
}

Im using node/ejs so the html code is just wrapped inside a body tag.

what am i missing?

Answer 1

Using a percentage value as grid-gap is breaking the grid height, because in this case it is height: auto, not an explicit value.
A solution would be to use px in order to have a similar distance you want:

@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;
}