如何在响应式网格中平衡行项数量以填充空白空间？

要解决你遇到的「自动网格最后一行项数过少」的问题，不用硬编码列数也能保留响应式特性，同时让浏览器自动平衡每行的项数，具体方案如下：

核心代码替换 #

把原来的网格列定义：

grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));

替换成：

grid-template-columns: repeat(auto-fit, minmax(clamp(80px, 100%/4 - 1rem, 1fr), 1fr));

代码说明 #

• clamp()函数是关键：它让项宽在三个值之间动态调整：
  1. 80px：保留你设置的最小项宽，确保小屏幕下项不会过窄
  2. 100%/4 - 1rem：限制每行最多4个项（容器宽度除以4，再减去网格间距避免溢出），当容器宽度足够放下4个80px的项时，会强制每行排列4个，不会出现5列导致最后一行只剩2个的情况
  3. 1fr：确保项能平分容器剩余空间，保持网格的弹性

灵活扩展方案 #

如果需要后续调整最小宽度或最大列数，用CSS变量维护更方便：

:root {
  --item-min-width: 80px;
  --max-columns: 4;
  --grid-gap: 1rem;
}

.grid-container {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(clamp(var(--item-min-width), 100%/var(--max-columns) - var(--grid-gap), 1fr), 1fr));
}

这样只需要修改变量值，就能快速调整布局规则，同时保持响应式特性。

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