行之间的CSS网格间隙答案

【问题标题】：CSS grid gap between rows行之间的CSS网格间隙
【发布时间】：2020-07-05 00:34:20
【问题描述】：

我正在尝试学习如何使用网格布局。我需要让我的网格占据整个页面，但由于某种原因，导航栏（第一行）和第二行之间有一个额外的空间。我如何摆脱空间，以便在第一行和第二行之间剩下的唯一空间是我指定的网格间隙。

* {
  margin: 0px;
  padding: 0px;
}

#grid-layout {
  display: grid;
  grid-gap: 6px;
  grid-column: 1fr 1fr 1fr 1fr;
  grid-row: 60px auto auto auto 30px;
  width: 100vw;
  height: 100vh;
  grid-template-areas: "nav nav nav nav" "top-post top-post post-2 post-3" "top-post top-post post-4 post-5" "newsletter newsletter newsletter newsletter" "ft ft ft ft";
}

.nav-bar {
  grid-area: nav;
  display: flex;
  flex-direction: row;
  border: 1px solid red;
  align-items: center;
  height: 100px;
  padding: 10px;
}

.website-title {
  width: 40%;
  justify-content: flex-start;
}

.nav-bar-list {
  display: flex;
  flex-direction: row;
  width: 60%;
  justify-content: flex-start;
  margin: 0px;
}

.nav-bar-item {
  margin-right: 50px;
}

.main-post {
  grid-area: top-post;
  border: 1px solid red;
  width: 100%;
  height: 100%;
}

#post2 {
  grid-area: post-2;
  border: 1px solid red;
}

#post3 {
  grid-area: post-3;
  border: 1px solid red;
}

#post4 {
  grid-area: post-4;
  border: 1px solid red;
}

#post5 {
  grid-area: post-5;
  border: 1px solid red;
}

.newsletter {
  grid-area: newsletter;
  border: 1px solid red;
}

#footer {
  grid-area: ft;
  border: 1px solid red;
  text-align: center;
  align-items: center;
  padding: 5px;
  margin: 0px;
  height: 30px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="index.css">
  <meta charset="utf-8">
</head>

<body>
  <div id="grid-layout">
    <nav class="nav-bar">
      <div class="website-title">Title</div>
      <ul class="nav-bar-list">
        <li class="nav-bar-item">Home</li>
        <li class="nav-bar-item">Blog</li>
        <li class="nav-bar-item">About</li>
      </ul>
    </nav>
    <section class="main-post">
      <div class="text-gradient">
        <a href="#">
          <h4>Main Post Here</h4>
        </a>
        <p>Main Post Summary here</p>
        <a href="#" class="main-post-button">Read More</a>
      </div>
    </section>
    <section class="post" id="post2">
      <a href="#" class="link">
        <div class="text-gradient">
          <h4>Post 2 Here</h4>
          <p>Post 2 subtitle</p>
        </div>
      </a>

    </section>
    <section class="post" id="post3">
      <a href="#" class="link">
        <div class="text-gradient">
          <h4>Post 3 Here</h4>
          <p>Post 3 subtitle</p>
        </div>
      </a>
    </section>
    <section class="post" id="post4">
      <a href="#" class="link">
        <div class="text-gradient">
          <h4>Post 4 Here</h4>
          <p>Post 4 subtitle</p>
        </div>
      </a>
    </section>
    <section class="post" id="post5">
      <a href="#" class="link">
        <div class="text-gradient">
          <h4>Post 5 Here</h4>
          <p>Post 5 subtitle</p>
        </div>
      </a>
    </section>
    <section class="newsletter">
      <form action="#">
        <h5>Subscribe to our Newsletter</h5>
        <div class="newsletter-container">
          <div class="newsletter-element">
            <input type="text" placeholder="Name" name="name" required>
          </div>
          <div class="newsletter-element">
            <input type="text" placeholder="Email address" name="mail" required>
          </div>
          <div class="newsletter-element">
            <input type="submit" value="Subscribe">
          </div>
        </div>
        <!-- newletter container -->
      </form>
    </section>
    <footer id="footer">
      <div>
        <p>All Right Reserved</p>
      </div>
    </footer>


  </div>

</body>

</html>

【问题讨论】：

对于额外空间，您只需要更改边距和填充。

标签： html css

【解决方案1】：

.nav-bar{
    grid-area: nav;
    display: flex;
    flex-direction: row;
    border: 1px solid red;
    align-items: center;
    height: 100px;
    padding: 10px;
}

您的 css 代码中有 padding:10px，如果应用了 .nav-bar 标签，padding 属性会增加一些边距，您必须将其更改为 padding:0px 或完全删除它

【讨论】：

我删除了它；但是，导航栏和下面的帖子之间仍有很大的空间。页脚也不会一直停留在底部
@eliranno 尝试做top:0px`bottom:0px'
仍然看到同样的问题
我基本上希望该行在红色边框线的位置结束。我认为这个额外的空间是第一行高度的剩余部分，但我不知道如何摆脱它
问题仍然存在。

【解决方案2】：

我认为问题出在您的“div”元素上，HTML 中的 ´´´

【讨论】：

【解决方案3】：

这是一个错字而不是“grid-template-column”“grid-template-row”我有“grid-column”“grid-row”

【讨论】：