具有底部边距css网格的令人头疼的问题

Question

我正在尝试设计我的网站。 Sofar我负责所有后端，但现在却在前端中挣扎。

到目前为止，我已经设法完成了一个没有导航栏和页脚的简单布局。它已经看起来像我想象中的布局方式，但是有一部分让我感到困扰，无法理解为什么：移动视图中的最后一个元素只是不想在底部边框处留空白。

到目前为止是我的代码：

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

和样式表

* {
  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;
  }
}

我正在使用node / ejs，因此html代码只是包装在body标签内。

我想念什么？

Answer 1

使用百分比值作为grid-gap会破坏网格高度，因为在这种情况下，它是height: auto，而不是显式值。一种解决方案是使用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;
}