如何在保留footer全宽背景且无容器时限制CSS Grid自身最大宽度？

当然可以做到！你要的效果完全不需要额外嵌套容器，也不用修改footer的全宽背景属性，只需要几个CSS属性的巧妙组合就能搞定。

直接上调整后的代码：

footer {
  background: #2d3748; /* 示例深色背景 */
  display: grid;
  justify-content: center; /* 让Grid内容水平居中 */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  column-gap: 2rem;
  /* 关键：自动计算左右内边距，把内部内容的最大宽度锁在60rem */
  padding-inline: max(0px, (100% - 60rem)/2);
  color: #fff; /* 示例文字颜色，方便看效果 */
  padding-block: 2rem; /* 上下加内边距，避免内容贴边 */
}

.footer__1, .footer__2 {
  padding: 1rem; /* 子块内边距示例 */
}

关键属性解析 #

• justify-content: center：当Grid的总宽度（子块+间距）小于footer的宽度时，会把Grid整体往中间靠，保证居中效果。
• padding-inline: max(0px, (100% - 60rem)/2)：这是实现需求的核心。当页面宽度超过60rem时，这个计算式会算出footer左右需要填充的内边距，让内部的可用空间刚好是60rem；如果页面宽度小于60rem，内边距就变成0，Grid会自动铺满可用宽度，不会出现横向滚动。
• minmax(0, 2fr) / minmax(0, 1fr)：加这个是为了避免子块内容过长时撑破Grid的比例——默认的fr比例在内容超出时可能失效，用minmax(0, ...)可以强制保持2:1的分配比例。

效果验证 #

• 页面宽度≥60rem时：.footer__1 + 2rem间距 + .footer__2的总宽度刚好是60rem，完全居中，footer的深色背景依然铺满整页宽度。
• 页面宽度<60rem时：两个子块按2:1的比例自适应宽度，间距保持2rem，footer还是全宽背景。

如果需要调整最大宽度，直接修改padding-inline里的60rem数值就行，非常灵活。

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