CSS Grid：子内容超出列宽时如何自动新建行？

核心思路 #

要实现基于内容宽度的自动换行（而非视口），同时保证右侧菜单项始终单行，需要结合Flex布局的单行特性和Grid的自适应列能力，让右侧容器的宽度由内容决定，当内容宽度超过Grid列的最小阈值时，自动触发换行。

修正后的完整代码 #

.main-container {
  background-color: #ccc;
  padding: 1.0rem;
  width: 1200px;
  margin: 1.0rem 0 0 1.0rem;
}

.menu-grid {
  display: grid;
  /* 自动适配列数，最小列宽600px，最大占满可用空间 */
  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
  gap: 1.0rem; /* 统一设置行列间距，替代grid-row-gap/grid-column-gap */
}

.left-menu {
  font-size: 1.25rem;
}

.right-menu {
  display: flex;
  flex-wrap: nowrap; /* 强制菜单项单行排列 */
  gap: 0.75rem; /* 菜单项间距 */
  background-color: white;
  width: fit-content; /* 容器宽度由内容总宽度决定 */
  min-width: 100%; /* 内容不足时占满整列，保持两栏布局 */
}

.right-item {
  background-color: #fff;
  text-align: center;
  min-width: 65px;
  border: 1px solid black;
  flex-shrink: 0; /* 禁止菜单项被压缩，保证最小宽度 */
}

<div class="main-container">
    <div class="menu-grid">
        <div class="left-menu">Left</div>
        <div class="right-menu">
            <div class="right-item">Item: 1</div>
            <div class="right-item">Item: 2</div>
            <div class="right-item">Item: 3</div>
            <div class="right-item">Item: 4</div>
            <div class="right-item">Item: 5</div>
            <div class="right-item">Item: 6</div>
            <div class="right-item">Item: 7</div>
            <div class="right-item">Item: 8</div>
            <div class="right-item">Item: 9</div>
            <div class="right-item">Item: 10</div>
            <div class="right-item">Item: 11</div>
            <div class="right-item">Item: 12</div>
            <div class="right-item">Item: 13</div>
        </div>
    </div>
</div>

关键调整说明 #

1. .menu-grid的自适应列设置：
   • repeat(auto-fit, minmax(600px, 1fr))会自动根据子元素宽度调整列数：当子元素宽度≤600px时，保持两栏；当子元素宽度＞600px时，自动换行成单列。
2. .right-menu的Flex单行控制：
   • flex-wrap: nowrap强制菜单项始终单行，避免堆叠；
   • width: fit-content让容器宽度由所有菜单项的总宽度决定，而非被Grid列宽限制；
   • min-width: 100%保证内容不足时，容器占满Grid列，维持两栏布局的视觉效果。
3. .right-item的防压缩设置：
   • flex-shrink: 0确保每个菜单项不会因为空间不足被压缩，始终保持min-width: 65px的最小宽度。

为什么之前的方法失效？ #

• 使用grid-auto-flow: column dense时，右侧菜单的Grid布局会强制项横向排列，但容器本身被Grid列宽限制，导致内容溢出；
• 改用inline-flex但未设置width: fit-content，容器仍会占满Grid列宽，内容依然溢出。

内容的提问来源于stack exchange，提问作者anthony