CSS Grid 如何实现元素最小间距35px、最大宽286px时拉满间距消除右侧空白

• 原代码存在两个核心错误，直接导致布局不符合预期：
  • 样式值缺少单位：grid-gap: 35 属于无效声明，CSS/JS 内联样式中所有长度类属性必须带单位（此处需要补充px），否则会被浏览器直接忽略，恢复成默认的0间距。
  • 布局逻辑反向：原写法用 minmax(286px, 1fr) 把容器剩余空间全部分配给了列本身的宽度，既突破了“元素最大宽度286px”的约束，也没有将剩余空间留给元素间距，最终出现右侧多余空白。

.container {
  display: grid;
  /* 锁死列宽最大为286px，不再让列轨道占用剩余空间 */
  grid-template-columns: repeat(auto-fit, 286px);
  /* 设置行列的最小间距为35px，作为间距的基准值 */
  gap: 35px;
  /* 核心规则：将所有列轨道之外的剩余空间，全部分配给列之间的间隙 */
  justify-content: space-between;
}

这套写法会完全匹配需求规则：

• 元素宽度严格控制在286px，不会被拉伸超过最大宽度限制
• 列间距始终大于等于35px的最小阈值，当容器宽度足够时，所有剩余空间会被平均分配到列间距中，间距会随容器宽度增加而自动变大
• 最左侧元素贴齐容器左边缘，最右侧元素贴齐容器右边缘，完全消除右侧多余空白
• 当容器宽度不足、无法放下更多列（即按照35px最小间距计算也塞不下）时，auto-fit 会自动减少每行的列数，触发换行，不会将间距压缩到35px以下

假设容器总宽度为1000px：

• 按固定规则计算，最多可放下3列：3*286px + 2*35px = 928px，剩余可用空间为72px
• justify-content: space-between 会将这72px平均分配到2个列间隙中，每个间隙增加36px，最终列间距为35px+36px=71px
• 三列最终位置分别为0px（容器左边缘）、357px、714px，最后一列右边缘刚好落在1000px（容器右边缘），无多余留白

当容器宽度收缩到900px时：

• 3列的最小占位928px已经超过容器宽度，auto-fit 会自动调整为每行放2列
• 2列的最小占位为2*286px +1*35px=607px，剩余的293px空间全部加到列间隙上，两列分别贴齐容器左右边缘，无多余留白

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