如何实现每3个<li>元素换行？现有columns布局方案存在问题

架构老林

2026-7-31

解决方案：用Flexbox或CSS Grid实现每3个列表项自动换行

原来的columns属性是按列强制分配空间，不管列表项总数，所以当数量不是3的倍数时，多余的项会被塞进前面的列里，没法实现“每3个一行”的需求。下面提供两种精准满足需求的方案：

方案一：Flexbox实现（兼容性更优）

CSS代码

ul {
  list-style: none; /* 隐藏项目符号 */
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap; /* 空间不足时自动换行 */
  gap: 10px; /* 可选：设置列表项之间的间距 */
}

ul li {
  flex: 0 0 calc(33.333% - 7px); /* 固定占1/3宽度，减去间距的影响 */
  box-sizing: border-box; /* 确保内边距/边框不会撑开宽度 */
}

关键说明

flex-wrap: wrap：让超出一行的列表项自动换行
calc(33.333% - 7px)：抵消gap带来的额外宽度，保证每行刚好3个项
box-sizing: border-box：避免内边距或边框导致宽度溢出

方案二：CSS Grid实现（代码更简洁）

CSS代码

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 直接定义3列，每列宽度均分 */
  gap: 10px; /* 可选：设置行列间距 */
}