本文详解如何通过正确设置父容器的 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">
@@##@@
<p>Copyright © 2020 Nexcent ltd.</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p>All rights reserved</p>
<div class="social-links">
@@##@@
@@##@@
@@##@@
@@##@@
</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 导航组）将严格并排显示，且具备良好的响应式扩展基础。
