Flexbox/Grid动态列与间距问题：如何实现统一列间距布局？

针对你描述的布局需求，下面给出两种可行的解决方案，优先推荐Grid布局，逻辑更简洁：

方案一：Grid布局（推荐） #

原Grid代码的问题在于使用minmax(80px, 1fr)会让列宽被拉伸，导致元素偏离固定80px且容器两侧出现间距。修改后可精准控制列宽、间距，同时满足不同容器宽度的布局要求：

.container {
  max-width: 319px;
  border: 2px dotted black;
  display: grid;
  /* 固定列宽80px，自动适配容器宽度 */
  grid-template-columns: repeat(auto-fit, 80px);
  /* 行间距15px，列间距计算为(319px - 3*80px)/2 = 39.5px，让3个元素刚好填满容器 */
  gap: 15px 39.5px;
  /* 确保最后一行元素左对齐，保持和上方一致的列间距 */
  justify-content: start;
}

.item {
  width: 80px;
  height: 80px;
}

/* 窄屏适配：当容器宽度不足以放下3个元素时，切换为间距撑满的布局 */
@media (max-width: 199.5px) {
  .container {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 15px;
    justify-content: stretch;
  }
}

说明 #

• 宽屏状态下，3个元素刚好贴容器左右边界，列间距均匀；第二行2个元素保持相同列间距，不会撑满
• 窄屏状态（最多放2个元素）时，自动切换为元素撑满容器宽度，间距均匀分配

方案二：Flex布局 #

原Flex的问题是justify-content: space-between会让最后一行元素间距过大，通过自定义margin和媒体查询可解决：

.container {
  max-width: 319px;
  border: 2px dotted black;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 15px;
  justify-content: flex-start;
}

.item {
  width: 80px;
  height: 80px;
  /* 设置和首行一致的列间距 */
  margin-right: 39.5px;
}

/* 去掉每行最后一个元素的右侧margin，保证首行贴容器右边界 */
.item:nth-child(3n) {
  margin-right: 0;
}

/* 窄屏适配：切换为间距撑满的布局 */
@media (max-width: 199.5px) {
  .container {
    justify-content: space-between;
  }
  .item {
    margin-right: 0;
  }
  .item:nth-child(3n) {
    margin-right: 0;
  }
}

说明 #

• 通过margin-right控制列间距，:nth-child(3n)确保每行最后一个元素无右侧margin
• 窄屏时自动切换为space-between，让元素间距撑满容器

最佳实践总结 #

优先使用Grid布局，代码更简洁，无需复杂的选择器处理最后一行元素；两种方案均通过媒体查询精准适配不同容器宽度，完全满足你要求的布局规则。

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