使用Grid布局时如何调整root内边距实现页面永久居中

问题根源 #

你当前页面右侧出现留白是两个样式叠加导致的：

• :root 设置了左右各5%的内边距，页面默认可用宽度仅为视口宽度的90%
• .container 设置了max-width: 80%，该宽度是基于90%的可用宽度计算，且块级元素默认左对齐，没有自动填充右侧空间，因此出现留白间隙。

解决方案 #

方案1：最简单的容器居中（无需修改:root内边距） #

直接给.container添加左右自动外边距即可，这是定宽块级元素居中的标准实现：

.container {
  display: grid;
  height: 100vh;
  max-width: 80%;
  margin: 0 auto; /* 新增这一行即可实现容器永久居中 */
  /* 剩余原有属性保持不变 */
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.2fr 1.2fr 1.8fr 0.3fr;
  grid-template-areas:
    "nav nav nav nav"
    "component1 component1 component1 component1"
    "component2 component2 component2 component2"
    "footer footer footer footer";
  grid-gap: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
}

方案2：动态调整:root内边距实现全局居中 #

如果你需要通过:root的内边距统一管控全局内容边距，可以用calc()函数动态计算左右内边距，自动平分剩余空间：

:root {
  /* 100%为视口总宽度，80vw是你期望的内容区总宽度，差值平分给左右内边距 */
  padding-left: calc((100% - 80vw) / 2);
  padding-right: calc((100% - 80vw) / 2);
}

.container {
  max-width: 100%; /* 原有80%的限制可以删掉或改为100%，由root统一管控宽度 */
  /* 剩余原有属性保持不变 */
}

调整后内容区会永久居中，无论窗口宽度如何变化，左右边距都会自动适配。

内容的提问来源于stack exchange，提问作者herbert mühlex