Verwenden Sie in Rasterelementen Container mit maximaler Breite

Question

Ich habe einen Container mit max-width: 80 rem und margin-inline: auto und wenn ich ihn auf ein Raster anwende, funktioniert es perfekt, indem das Raster ab 80 rem zentriert wird

<div class="grid-container container">
        <header class="primary-header flex "> //i want to put container class here
            <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>

Aber ich möchte die Containerklasse in die Element-Header-Zelle einfügen, aber es funktioniert nicht. Es zentriert den gesamten Header-Inhalt, ohne die Größe von 80rem zu erreichen. Ich verstehe nicht, warum? Ich kenne ils aufgrund von margin-inline, aber normalerweise ist es bei 80rem zentriert und nicht davor.

.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;
}

Answer 1

当“container”类应用于父“grid-container”div时，它具有max-width: 80rem;和margin-inline:自动；。因此，当视口宽度大于 80rem 时，可用的内联边距将被分割并平均应用于 div 及其父项 (body) 之间，其中 div 居中>div。 header 是 div 的子级，因此它在其容器内具有默认的左对齐方式。

当“container”类应用于 header 时，div 的宽度不受限制，并且 header 现在已划分并应用所有可用的内联边距位于其自身和 div 之间，导致 header 居中。可用边距来自 header 的实际宽度（几乎 40rem），而不是来自 max-width 声明。

如果您只想 header 有最大宽度而不是 main，您可以通过添加 width: 100% 来实现您想要的结果 到 .container

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

<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>