为什么我的CSS Grid导航栏布局末尾会出现多余的网格单元格？

根本原因 #

auto-fit 生成的网格列数是全局适配整个网格容器的宽度，不会单独为某一行重新计算列数：

• 你设置的 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) 会先计算当前网格容器的总宽度，算出最多能放下多少个宽度≥200px且保留20px gap的列，这个列数是整个网格的统一列数，所有行都共用这个列配置。
• h1 设置了 grid-column: 1/-1 占满所有列，它会强制撑开网格的总列数到最大可容纳值，比如容器宽度够放6列时，整个网格就固定为6列。
• 第二行只有5个导航项，自然就会剩下最后1个没有元素填充的空白网格单元格。

方案1：固定导航项列数（适合导航项数量固定的场景） #

直接指定网格列数和你实际的导航项数量一致即可，修改 .navbar 的CSS：

.navbar {
  margin: 20px;
  display: grid;
  grid-template-columns: repeat(5, minmax(200px, 1fr)); /* 固定为5列和导航项匹配 */
  gap: 20px;
}

方案2：拆分两层网格（保留响应式自适应能力的最优方案） #

给导航项单独套一层父容器，h1 和导航项父容器作为外层网格的两个子元素，导航项内层单独配置自适应网格，避免h1影响导航项的列数计算：
修改后的HTML代码：

<div class="container">
  <nav class="navbar">
    <h1>12345</h1>
    <!-- 新增导航项父容器 -->
    <div class="nav-items">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
      <div class="item4">4</div>
      <div class="item5">5</div>
    </div>
  </nav>
</div>

修改后的CSS代码：

body {
  margin: 0;
  padding: 0;
}

.navbar {
  margin: 20px;
  display: grid;
  grid-template-columns: 1fr; /* 外层仅1列，两行分别放h1和导航容器 */
  gap: 20px;
}

.nav-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.nav-items div {
  background-color: rgb(255, 144, 255);
}

.navbar h1 {
  margin: 0;
}

这种方案下导航项的列数完全独立计算，auto-fit会自动折叠没有元素的空列，不会出现多余空白单元格。

内容的提问来源于stack exchange，提问作者董成意