在網格項目中使用最大寬度容器

Question

我有一個 max-width: 80 rem 和 margin-inline: auto 的容器，當我將它應用到網格上時，它通過將網格從 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>

但我想將容器類別放在專案標題單元格中，但它無法正常工作，它將所有標題內容居中而沒有達到 80rem 的大小，我不明白為什麼？我知道 ils 因為 margin-inline 但通常它以 80rem 為中心，而不是之前。

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