Gunakan bekas lebar maksimum dalam item grid

Question

Saya mempunyai bekas dengan lebar maksimum: 80 rem dan margin-inline: auto dan apabila saya menggunakannya pada grid ia berfungsi dengan sempurna dengan memusatkan grid dari 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>

Tetapi saya ingin meletakkan kelas kontena dalam sel pengepala item tetapi ia tidak berfungsi, ia memusatkan semua kandungan pengepala tanpa mencapai saiz 80rem, saya tidak faham mengapa? Saya tahu tentang ils kerana margin-inline tetapi biasanya ia berpusat pada 80rem dan bukan sebelum ini.

.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

Apabila kelas "bekas" digunakan pada anak "bekas grid" induk div时，它具有max-width: 80rem;和margin-inline:自动；。因此，当视口宽度大于 80rem 时，可用的内联边距将被分割并平均应用于 div 及其父项 (body) 之间，其中 div 居中>div。 header 是 div, maka kelas itu mempunyai penjajaran kiri lalai dalam bekasnya.

Apabila kelas "bekas" digunakan pada lebar header 时，div 的宽度不受限制，并且 header 现在已划分并应用所有可用的内联边距位于其自身和 div 之间，导致 header 居中。可用边距来自 header sebenar (hampir 40rem), bukan daripada pengisytiharan lebar maksimum.

Jika anda hanya mahu
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>