css 在grid-item中使用最大宽度容器

zlwx9yxi 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(131)

我有一个最大宽度的容器：80 rem和margin-inline：自动，当我应用它在网格上，它的工作完美的中心网格为我从80雷姆

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

但是我想把容器类放在项目头单元格中，但是它不能正常工作，它在没有达到80 rem大小的情况下就集中了所有头内容，我不明白为什么？我知道ils因为margin-inline，但通常它集中在80 rem之前没有。

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

css

来源：https://stackoverflow.com/questions/76510104/using-a-max-width-container-in-grid-item

1条答案

按热度按时间

6ie5vjzr1#

<div class="grid-container container">

当'container'类应用于父'grid-container' div时，它有max-width: 80rem;和margin-inline: auto;。因此，当视口宽度大于80 rem时，可用的内联边距将被分割并相等地应用在div和父对象（body）之间的两侧，该父对象以div为中心。header是div的子级，因此它在容器内部具有默认的左对齐方式。
<header class="primary-header flex container">

当'container'类应用于header时，div的宽度不受限制，header现在将所有可用的内联边距划分并应用在div和div之间，从而使header居中。可用的边距来自header的 * 实际 * 宽度（几乎40 rem），而不是来自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>

赞(0）回复(0）举报 2023-06-25

我来回答

css 在grid-item中使用最大宽度容器

1条答案

相关问题

热门标签

最新问答