从CSS网格问题中删除空格

Question

我已经在CSS中创建了一个网格，但在使用空白时遇到了问题。网格之间似乎有太多的空格，我似乎找不到导致它的错误。我是web开发的新手，所以我可能遗漏了一些非常明显的东西，或者可能过度编码了这个特性。

我已经将我想要的外观和当前的外观以及代码放在下面的图表中。感谢您抽出时间来:)

目前看起来像：

​

我希望它看起来是什么样子：

​

代码如下：

​

  .site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-content {
  flex-grow: 1;
  padding: 6rem 0;
  /* Homepage code */
  .homepage {
    margin: auto;
    max-width: 1000px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 3rem;
    min-height: 280px;
    align-content: center;
  }
  .topics {
    justify-self: stretch;
    min-width: 500px;
  }
  .homepage-recent-title {
    font-size: 3rem;
    position: relative;
    align-self: center;
    overflow: hidden;
    margin: auto;
    line-height: 1;
    width: 50%
  }
  .homepage-topics-title {
    font-size: 3rem;
    position: relative;
    align-self: center;
    overflow: hidden;
    margin-left: 3rem;
    line-height: 1;
  }
  .individual-topics {
    position: relative;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 5rem;
    padding-right: 50%;
    font-size: 1.6rem;
    font-weight: 400;
    align-items: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 3;
  }

<div class="homepage">
  <div class="topics">
    <div class="homepage-topics-title">
      Explore some topics:
    </div>
    <div class="individual-topics">
      <a href="/productivity" class="topic1">Productivity</a>
      <a href="/orginisation" class="topic2">Orginisation</a>
      <a href="/time-management" class="topic3">Time-Management</a>
    </div>
  </div>
  <div class="recent">
    <div class="homepage-recent-title">
      Recent articles
    </div>
    <div class="hompage-recent-articles">
      {{{body}}}
    </div>
  </div>
</div>

​

Answer 1

尝试调整.site类中的gap属性。.topics类的justify-content: stretch。当使用值stretch flex将项目均匀地分配到stretch‘auto’大小的项目以适应容器，在你的例子中使用.topics类的div。

​

  .site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  gap: 0px;
}

​

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

Answer 2

尝试在.homepage类上添加justify-content:空格环绕；