Grid子项应用max-width容器类后未按预期居中的问题

我定义了包含max-width:80rem和margin-inline:auto的.container类，将其应用于grid-container容器时，容器宽度达到80rem后会自动居中，效果符合预期。但把这个类移到Grid子项header上时，header里的内容还没到80rem宽度就居中了，我有点搞不懂——虽然知道和margin-inline有关，但预期应该是宽度到80rem时才触发居中。

HTML代码 #

<div class="grid-container">
    <header class="primary-header flex container">
        <h1 class="logo uppercase text-white">adventure</h1>
        <button class="mobile-nav-toggle" aria-controls="primary-navigation" aria-expanded="false"><span class="sr-only">Menu</span></button>
        <nav class="flex">
            <ul id="primary-navigation" class="primary-navigation flex text-white capitalise letter-spacing-3 fs-base" data-visible="false">
                <li><a href="">home</a></li>
                <li><a href="">tours</a></li>
                <li><a href="">explore</a></li>
                <li><a href="">about</a></li>
                <li><button class="btn bg-pink text-white ">contact</button></li>
            </ul>
        </nav>
    </header>
    <main></main>
</div>

CSS代码 #

.flex {
  display: flex;
  gap: var(--gap, 2rem);
}
.grid-container {
  height: 100vh;
  display: grid;
  grid-template-rows: min-content 1fr;
  text-align: center;
}
.container {
  max-width: 80rem; 
  margin-inline: auto;
}

核心原因是Grid子项的默认宽度行为差异：

• 当.container加在grid-container上时，这个容器是块级元素，默认宽度占满父容器（这里是视口），所以只有视口宽度超过80rem时，max-width才会生效，把容器宽度限制在80rem，此时margin-inline:auto会让这个固定宽度的容器在视口中居中，和你预期一致。
• 但当.container加在header这个Grid子项上时，Grid子项默认宽度是auto（收缩包裹内部内容），header的实际宽度由内容撑开，而非占满Grid轨道的可用空间。这时候max-width:80rem只是设置了宽度上限，但实际宽度远小于80rem，margin-inline:auto直接让这个“内容宽度”的header在Grid轨道里居中，自然没到80rem就触发了居中效果。

要实现你预期的效果（header先占满Grid轨道，直到宽度达到80rem后再居中），只需给.container新增width:100%，让它先填满Grid的可用宽度，再通过max-width限制上限：

.container {
  max-width: 80rem; 
  margin-inline: auto;
  width: 100%; /* 新增这一行 */
}

修改后，header会先继承Grid轨道的宽度（占满父容器），当视口宽度超过80rem时，max-width生效，header宽度被限制在80rem，此时margin-inline:auto就会让它居中，和之前加在grid-container上的效果完全一致。

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