尝试网格中的网格，但我很困惑如何将它放在一起

Question

我试图将“类附加div”放在“类div容器8”之间的某个位置，但没有任何效果，它只是留在容器下。

我让它在附加 div 本身中彼此相邻工作，但现在我需要在带有徽标的 div 旁边制作附加 div。

我也尝试将 grid-auto-flow 放入容器8中或CSS中的页脚中，但没有结果。所以我肯定做错了什么，我只是不知道它是什么。

footer {
  grid-template-columns: 1fr 1fr;
  min-height: 150px;
  background: var(--Neutral-Black, #263238);
}

.container8 {
  display: grid;
  padding: 64px 165px;
}

.additional {
  display: grid;
  grid-auto-flow: column;
}

.container8 p {
  color: var(--Neutral-Silver, #F5F7FA);
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.additional p {
  color: var(--Neutral-Silver, #F5F7FA);
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.additional h2 {
  color: var(--Neutral-White, #FFF);
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
}

<footer>
  <div class="container8">
    <img src="images/Logo_nexx.png">
    <p>Copyright © 2020 Nexcent ltd.</p>
    <p>All rights reserved</p>
    <div>
      <img src="images/insta.svg">
      <img src="images/basket.svg">
      <img src="images/twitter.svg">
      <img src="images/yt.svg">
    </div>
  </div>

  <div>
    <div class="additional">
      <div>
        <h2>Company</h2>
        <p>About us</p>
        <p>Blog</p>
        <p>Contact us</p>
        <p>Pricing</p>
        <p>Testimonials</p>
      </div>
      <div>
        <h2>Support</h2>
        <p>Help center</p>
        <p>Terms of service</p>
        <p>Legal</p>
        <p>Privacy policy</p>
        <p>Status</p>
      </div>
      <h2>Stay up to date</h2>
    </div>
  </div>
</footer>

Answer 1

您拥有的代码都很好，您已在页脚内添加了模板列，如果您希望容器8和其他并排显示，您应该将父级的显示设置为网格，而不是内部的子级它

这是您需要编辑的内容

footer {
  /* Add display grid in the footer */
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 150px;
  background: var(--Neutral-Black, #263238);
}

.container8 {
  /* You can remove the display block too, as by defualt it has display block, setting it to grid isn't needed */
  display: block;
  padding: 64px 165px;
}

/* .additional will work just fine but using a flexbox like this might be much easier for some */
.additional {
  display: flex;
  justify-content: space-around
}

这就是最终的改变结果

footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 150px;
  background: var(--Neutral-Black, #263238);
}

.container8 {
  display: block;
  padding: 64px 165px;
}

.additional {
  display: flex;
  justify-content: space-around;
}

.container8 p {
  color: var(--Neutral-Silver, #f5f7fa);
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.additional p {
  color: var(--Neutral-Silver, #f5f7fa);
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.additional h2 {
  color: var(--Neutral-White, #fff);
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
}

<footer>
  <div class="container8">
    <img src="images/Logo_nexx.png">
    <p>Copyright © 2020 Nexcent ltd.</p>
    <p>All rights reserved</p>
    <div>
      <img src="images/insta.svg">
      <img src="images/basket.svg">
      <img src="images/twitter.svg">
      <img src="images/yt.svg">
    </div>
  </div>

  <div>
    <div class="additional">
      <div>
        <h2>Company</h2>
        <p>About us</p>
        <p>Blog</p>
        <p>Contact us</p>
        <p>Pricing</p>
        <p>Testimonials</p>
      </div>
      <div>
        <h2>Support</h2>
        <p>Help center</p>
        <p>Terms of service</p>
        <p>Legal</p>
        <p>Privacy policy</p>
        <p>Status</p>
      </div>
      <h2>Stay up to date</h2>
    </div>
  </div>
</footer>

希望对你有帮助，PS：如果喜欢请点赞。