CSS Grid布局问题：如何让additional容器与logo容器横向排列

问题核心出在footer元素上：你给它设置了grid-template-columns: 1fr 1fr，但没添加display: grid，导致它根本不是网格容器，子元素还是默认的块级行为，自然会垂直堆叠。

按以下步骤修改即可解决：

1. 修复footer的网格布局 #

给footer添加上display: grid，让它的两列设置生效，使container8和右侧附加内容容器横向并排：

footer {
  display: grid; /* 关键：将footer转为网格容器 */
  grid-template-columns: 1fr 1fr;
  min-height: 150px;
  background: var(--Neutral-Black, #263238);
}

2. 统一右侧容器的内边距 #

给包裹additional的div添加一个类（比如footer-right），设置和container8一致的内边距，保证左右布局对齐：

<!-- 修改后的HTML结构 -->
<footer>
  <div class="container8">
    <!-- 原有内容保持不变 -->
  </div>

  <div class="footer-right"> <!-- 新增类名 -->
    <div class="additional">
      <!-- 原有内容保持不变 -->
    </div>
  </div>
</footer>

对应的CSS补充：

.footer-right {
  padding: 64px 165px; /* 和container8保持一致的内边距 */
}

3. 优化additional内部布局（可选） #

给additional添加gap属性，让内部列之间产生间距，提升视觉舒适度：

.additional {
  display: grid;
  grid-auto-flow: column;
  gap: 40px; /* 新增：列之间的间距 */
}

修改后的完整代码 #

CSS #

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

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

.footer-right {
  padding: 64px 165px;
}

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

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

HTML #

<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 class="footer-right">
    <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>

修改完成后，container8和additional所在的容器会横向并排，同时整体布局保持整齐。

内容的提问来源于stack exchange，提问作者PabloDJFB