Utiliser des conteneurs de largeur maximale dans les éléments de grille

Question

J'ai un conteneur avec max-width : 80 rem et margin-inline : auto et quand je l'applique sur une grille cela fonctionne parfaitement en centrant la grille à partir de 80 rem

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

Mais je veux mettre la classe conteneur dans la cellule d'entête de l'élément mais ça ne marche pas, ça centre tout le contenu de l'entête sans atteindre la taille de 80rem, je ne comprends pas pourquoi ? Je connais ils à cause de margin-inline mais généralement il est centré à 80rem et pas avant.

.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

Lorsque la classe "conteneur" est appliquée à un enfant du parent "grid-container" div时，它具有max-width: 80rem;和margin-inline:自动；。因此，当视口宽度大于 80rem 时，可用的内联边距将被分割并平均应用于 div 及其父项 (body) 之间，其中 div 居中>div。 header 是 div elle a donc un alignement à gauche par défaut dans son conteneur.

Lorsque la classe "conteneur" est appliquée à la header 时，div 的宽度不受限制，并且 header 现在已划分并应用所有可用的内联边距位于其自身和 div 之间，导致 header 居中。可用边距来自 header largeur réelle (presque 40rem), et non à partir de la déclaration max-width.

Si tu veux juste
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>