本文详解如何通过正确设置父容器的 display: grid 和 grid-template-columns，使 footer 内的 .container8 和 .additional 两个区块水平并排显示，而非默认的垂直堆叠。
本文详解如何通过正确设置父容器的 display: grid 和 grid-template-columns，使 footer 内的 .container8 和 .additional 两个区块水平并排显示，而非默认的垂直堆叠。
在 CSS Grid 布局中，一个常见误区是：将 grid-template-columns 应用于父元素（如 footer），却未同时为其声明 display: grid。这正是本例问题的根本原因——尽管你已在 footer 中定义了 grid-template-columns: 1fr 1fr，但缺少 display: grid，导致该规则完全失效，子元素仍按普通文档流垂直排列。
✅ 正确做法是：将 以下是关键修复步骤与优化建议： ⚠️ 注意： 立即学习“前端免费学习笔记（深入）”； 按此方案调整后，footer 设为网格容器，使其直接子元素（即 .container8 和包裹 .additional 的匿名 <div>）成为网格项（grid items），从而受 <code>grid-template-columns 控制。1. 修正父容器：启用 Grid 布局
footer {
display: grid; /* ✅ 必须添加：激活 Grid 上下文 */
grid-template-columns: 1fr 1fr; /* 两列等宽布局 */
min-height: 150px;
background: var(--Neutral-Black, #263238);
padding: 0 40px; /* 可选：统一内边距，替代子元素冗余 padding */
}.container8 和 .additional 的父级（即 <footer></footer> 的两个直接子 <div>）才是真正的网格项。因此无需对 <code>.container8 或 .additional 自身设 display: grid（除非其内部需进一步网格布局）。2. 简化子元素样式
.container8 默认为块级元素（display: block），无需显式声明 display: grid，保留即可：.container8 {
padding: 64px 165px; /* 可根据实际响应式需求调整 */
}.additional 内部为多列导航组，使用 display: flex 比 grid-auto-flow: column 更直观、兼容性更好：.additional {
display: flex;
justify-content: space-between; /* 或 space-around，按需选择间距策略 */
gap: 40px; /* 推荐：现代写法，替代 margin 手动控制 */
}3. 完整推荐代码（含语义优化）
<footer>
<div class="container8">
<img src="images/Logo_nexx.png" alt="Nexcent Logo">
<p>Copyright © 2020 Nexcent ltd.</p>
<p>All rights reserved</p>
<div class="social-links">
<img src="images/insta.svg" alt="Instagram">
<img src="images/basket.svg" alt="Shopping Cart">
<img src="images/twitter.svg" alt="Twitter">
<img src="images/yt.svg" alt="YouTube">
</div>
</div>
<div class="footer-links">
<div class="additional">
<div>
<h2>Company</h2>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
</div>
<div>
<h2>Support</h2>
<ul>
<li><a href="#">Help center</a></li>
<li><a href="#">Terms of service</a></li>
<li><a href="#">Legal</a></li>
<li><a href="#">Privacy policy</a></li>
<li><a href="#">Status</a></li>
</ul>
</div>
<div>
<h2>Stay up to date</h2>
<form>
<input type="email" placeholder="Your email" aria-label="Subscribe to newsletter">
<button type="submit">→</button>
</form>
</div>
</div>
</div>
</footer>✅ 总结要点
footer）定义，子元素专注内容结构。.container8 和 .additional 无需 display: grid，除非内部有复杂二维布局需求。gap 替代 margin：提升可维护性，避免父子 margin 折叠问题。alt 属性，链接/表单使用语义化标签（<ul></ul>, <form></form>）。.container8（含 Logo 和版权信息）与 .footer-links（含 .additional 导航组）将严格并排显示，且具备良好的响应式扩展基础。
