如何仅用CSS实现可变宽度子项在两行均匀分布且子项间距固定？

这个需求完全可以仅通过CSS实现，不需要用JS拆分元素数组嵌套额外父容器，用Grid布局就能直接满足所有要求。

核心逻辑 #

固定容器为2行，元素按列优先自动排列，自动生成对应数量的列，列宽均分实现自适应，用gap设置固定间距即可。

代码示例 #

.container {
  display: grid;
  /* 固定为2行，行高由内容撑开 */
  grid-template-rows: repeat(2, auto);
  /* 按列优先填充元素，自动生成对应数量的列 */
  grid-auto-flow: column;
  /* 所有列宽度自动均分 */
  grid-auto-columns: 1fr;
  /* 子项之间的固定间距，可自行调整数值 */
  gap: 12px;
  /* 容器宽度可根据实际需求设置，比如100%或者固定宽度 */
  width: 100%;
}

.badge {
  /* 保留你原有的badge样式即可，不需要额外设置宽度 */
}

效果说明 #

• 共8个badge时：自动生成4列，每行正好放4个
• 共6个badge时：自动生成3列，每行正好放3个
• 共7个badge（奇数）时：自动生成4列，第一行4个、第二行3个
• 所有场景下badge宽度都会自适应均分，子项间距始终保持固定

如果要兼容不支持Grid的极端老旧环境，也可以用Flex布局实现，需要配合CSS变量传入badge总数：

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  /* 需要通过JS给容器设置--count变量，值为badge的总数量 */
  --columns: calc(ceil(var(--count) / 2));
}

.badge {
  width: calc((100% - 12px * (var(--columns) - 1)) / var(--columns));
}

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