【问题标题】：display: grid; is causing width issues ignoring css width properties显示：网格；导致宽度问题忽略css宽度属性
【发布时间】：2021-11-28 18:39:57
【问题描述】：

代码

我有一个 <nav>、<main>、<footer> [按此顺序] 嵌套在我的 <body> 中。我的<main> 或<footer> 没有问题。这是导航的 HTML：

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  height: 100%;
  display: grid;
  place-items: center;
}

nav {
  max-width: 90%;
}

.title-container {
  display: grid;
  place-items: center;
  height: 12rem;
}

.nav-link-container {
  box-sizing: border-box;
  background: #B8B8B8;
  padding: 15px;
  height: 130px;
  overflow-y: scroll;
}

.nav-link-container>header {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.nav-link-container>header:last-child {
  margin-bottom: 0px;
}

<nav id="navbar">
  <div class="title-container">
    <header>
      <h1 class="title red">Git & GitHub Basics</h1>
      <h1 class=title light>Learning Git</h1>
    </header>
  </div>
  <div class=nav-link-container>
    <header><a class="nav-link" href="#Understanding_the_Workflow">Understanding the Workflow</a></header>
    <header><a class="nav-link" href="#Initializing_a_Repository_&_Staging_Files">Initializing a Repository & Staging Files</a></header>
    <header><a class="nav-link" href="#Status,_Unstaging_Files,_&_Committing">Status, Unstaging Files, & Committing</a></header>
    <header><a class="nav-link" href="#Comparing_Files_Changes">Comparing Files Changes</a></header>
    <header><a class="nav-link" href="#GitHub_&_Using_Clone,_Push,_&_Pull">GitHub & Using Clone, Push, & Pull</a></header>
  </div>
</nav>

问题

<nav> 的宽度似乎仅限于“虚构”边界，它停留在 325.8 像素并且不会超过该值。目标是让<nav> 达到浏览器宽度的 90%。

尝试过的解决方案

当我删除display: grid; 时，问题就解决了。 display: grid; 不会对文档的其余部分造成问题；其余的功能如预期。删除 <nav> 的所有 css 并不能解决问题。

也许有人可以解释为什么 display: grid 会导致问题？

【问题讨论】：

max-width 意味着没有初始 width 值。改为将其设置为 width: 90%。 Grid 不会导致问题，而是将您的元素放入网格中。该网格只会尽可能宽。
你是对的@disinfor。对于任何好奇的人，我现在意识到发生了什么；我认为容器的宽度是由容器的内容设置的，所以也需要将我的main {max-width...} 更改为width。谢谢！
这能回答你的问题吗？ CSS width 100% OR max-width in pixels

标签： html css css-grid nav

【解决方案1】：

尝试在导航中将max-width: 90% 替换为width: 90%：

* {
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
    height: 100%;
    display: grid;
    place-items: center;
}

nav {
    width: 90%;
}

.title-container {
    display: grid;
    place-items: center;
    height: 12rem;
}

.nav-link-container {
    box-sizing: border-box;
    background: #B8B8B8;
    padding: 15px;
    height: 130px;
    overflow-y: scroll;
}

.nav-link-container > header {
    display: flex;
    /*justify-content: center;*/
    margin-bottom: 16px;
}

.nav-link-container > header:last-child {
    margin-bottom: 0px;
}

<nav id="navbar">
    <div class="title-container"><header><h1 class="title red">Git & GitHub Basics</h1><h1 class=title light>Learning Git</h1></header></div>
    <div class=nav-link-container>
        <header><a class="nav-link" href="#Understanding_the_Workflow">Understanding the Workflow</a></header>
        <header><a class="nav-link" href="#Initializing_a_Repository_&_Staging_Files">Initializing a Repository & Staging Files</a></header>
        <header><a class="nav-link" href="#Status,_Unstaging_Files,_&_Committing">Status, Unstaging Files, & Committing</a></header>
        <header><a class="nav-link" href="#Comparing_Files_Changes">Comparing Files Changes</a></header>
        <header><a class="nav-link" href="#GitHub_&_Using_Clone,_Push,_&_Pull">GitHub & Using Clone, Push, & Pull</a></header>
    </div>
</nav>

【讨论】：