CSS Grid布局问题求助：实现最多3列Label自动换行重排

我明白你折腾了好几个小时的CSS Grid溢出问题，咱们来一步步搞定它。你的需求是让label元素最多显示3列，放不下自动换行，还能尽量让每行塞更多内容，现有代码的问题主要出在列宽的计算上，导致内容溢出容器。

问题分析 #

你原来的grid-template-columns: repeat(auto-fit, minmax(max-content, 30%))有两个关键问题：

• 当label的内容宽度超过容器的30%时，minmax会取max-content作为列宽，直接导致列超出容器范围，出现溢出。
• 没有考虑grid-gap的宽度占用，3列加上两个10px的gap，总宽度会超过容器的100%。

修复方案 #

调整网格列的定义，确保列宽既能容纳内容（不换行），又不会超过容器的1/3宽度（减去gap的分摊值），同时保留自动适配的能力：

body { 
  background-color: #555; 
  margin: 0; 
  padding: 0; 
}
.main-wrapper { 
  background-color: #fff; 
  margin: auto; 
  max-width: 280px;
  padding: 0 10px; /* 给容器加内边距，避免内容贴边 */
}
label { 
  white-space: nowrap;
  display: block; /* 让label占满网格单元格宽度，避免checkbox和文字错位 */
}
.wrapper { 
  padding-bottom: 50px; 
  display: grid; 
  grid-gap: 10px; 
  /* 核心修改：每列最小宽度是内容宽度，最大宽度是容器1/3减去gap分摊值 */
  grid-template-columns: repeat(auto-fit, minmax(max-content, calc(33.333% - (2 * 10px)/3)));
  grid-auto-rows: min-content; /* 行高自适应内容，简化定义 */
}

<div class="main-wrapper">
  <div class="wrapper">
    <label><input type="checkbox"/>Bafang M500</label>
    <label><input type="checkbox"/>Bafang MaxDrive</label>
    <label><input type="checkbox"/>Bosch Active Plus</label>
    <label><input type="checkbox"/>Bosch Performance</label>
    <label><input type="checkbox"/>Bosch Performance CX</label>
    <label><input type="checkbox"/>OLI SPORT</label>
    <label><input type="checkbox"/>Shimano StePS E6000</label>
    <label><input type="checkbox"/>Shimano STePS E6100</label>
    <label><input type="checkbox"/>Yamaha PW-ST</label>
  </div>
  <div class="wrapper">
    <label><input type="checkbox"/>500<<</label>
    <label><input type="checkbox"/>500</label>
    <label><input type="checkbox"/>400</label>
    <label><input type="checkbox"/>300</label>
    <label><input type="checkbox"/>200</label>
    <label><input type="checkbox"/>100</label>
    <label><input type="checkbox"/><100</label>
  </div>
</div>

关键修改说明 #

• calc(33.333% - (2 * 10px)/3)：计算每列的最大宽度，33.333%是容器的1/3，减去两个gap（总20px）分摊到每列的宽度，确保3列加gap刚好填满容器。
• auto-fit：自动根据容器宽度调整列数，当容器不够放下3列时，自动减少列数，让每行尽量容纳最多元素。
• 给main-wrapper加左右内边距，避免内容贴在容器边缘，视觉更舒服。
• 给label设置display: block，确保checkbox和文字在同一行且占满单元格宽度，避免布局错位。

这样修改后，你的label元素会：

1. 最多显示3列，不会溢出容器
2. 容器宽度变窄时自动减少列数，自动换行
3. 每行都会尽量容纳尽可能多的元素

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