CSS Grid：用gap还是空Div实现Footer布局？

不用空Div填充，也不用依赖均等的grid-gap，推荐结合自定义列宽+margin控制不等间距的方案，既保持语义化结构，又能灵活实现不同区域的间距需求。

核心思路 #

1. 用grid-template-columns直接定义各区域的列宽（可混合固定值、百分比、fr单位），不需要额外空元素占位
2. 放弃全局的grid-gap（或仅保留最小基础间距），改用元素自身的margin来控制不同区块间的不等间距
3. 配合grid-column或grid-template-areas快速定位元素，让布局更直观

代码示例 #

假设你的Footer包含Logo、三组链接、版权信息，且各区块间距不同：

HTML结构（无空Div，纯语义化元素）

<footer class="site-footer">
  <div class="footer-logo">My Logo</div>
  <div class="footer-links group-1">
    <h4>产品</h4>
    <ul><li>功能1</li><li>功能2</li></ul>
  </div>
  <div class="footer-links group-2">
    <h4>支持</h4>
    <ul><li>帮助中心</li><li>联系我们</li></ul>
  </div>
  <div class="footer-links group-3">
    <h4>关于</h4>
    <ul><li>公司简介</li><li>博客</li></ul>
  </div>
  <div class="footer-copyright">© 2024 My Company</div>
</footer>

CSS实现

.site-footer {
  display: grid;
  /* 定义列：Logo固定宽度，三组链接分配剩余空间，版权列自适应宽度 */
  grid-template-columns: 180px 1fr 1fr 1fr auto;
  align-items: start;
  padding: 2.5rem 3rem;
  background-color: #2d2d2d;
  color: #fff;
}

/* 自定义不同区块的间距 */
.footer-logo {
  margin-right: 6rem; /* Logo与第一组链接的大间距 */
}

.footer-links.group-1,
.footer-links.group-2 {
  margin-right: 4rem; /* 中间链接组之间的中等间距 */
}

/* 版权信息靠右对齐 */
.footer-copyright {
  justify-self: end;
  margin-top: 1rem;
}

进阶优化：用grid-template-areas提升可读性 #

如果布局区块较多，用grid-template-areas可以更直观地映射结构：

.site-footer {
  display: grid;
  grid-template-areas: 
    "logo links1 links2 links3 copyright";
  grid-template-columns: 180px 1fr 1fr 1fr auto;
  gap: 1rem; /* 保留最小基础间距，再叠加margin实现不等距 */
  align-items: start;
  padding: 2.5rem 3rem;
  background-color: #2d2d2d;
  color: #fff;
}

.footer-logo { grid-area: logo; margin-right: 5rem; }
.footer-links.group-1 { grid-area: links1; margin-right: 3rem; }
.footer-links.group-2 { grid-area: links2; margin-right: 3rem; }
.footer-links.group-3 { grid-area: links3; }
.footer-copyright { grid-area: copyright; justify-self: end; margin-top: 1rem; }

为什么这个方案更好 #

• 语义化：不需要无意义的空Div，HTML结构更干净易维护
• 灵活性：通过margin精准控制任意两个区块间的间距，比全局grid-gap更适配不等距需求
• 响应式友好：移动端只需修改grid-template-columns: 1fr，再调整margin即可实现堆叠布局

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