如何让ul的li元素每满5个时自动创建新列（不使用grid）

以下两种方案均无需修改原有HTML结构，不依赖Grid布局即可实现需求：

方案1：Flex布局实现（兼容性好，适合li高度固定场景） #

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /* 高度设置为刚好容纳5个li，可根据实际li高度调整 */
  height: calc(5 * 32px);
  /* 可选：列间距 */
  column-gap: 40px;
}
li {
  /* 保持每个li高度一致 */
  height: 32px;
  line-height: 32px;
}

核心逻辑是让列表纵向排列，高度限制为刚好放下5个li，超出高度的元素会自动换行到新列。

方案2：CSS多列布局实现（适合li高度不固定场景） #

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: auto;
  column-fill: auto;
  /* 高度设置为刚好容纳5个li，可根据实际调整 */
  height: calc(5 * 32px);
  /* 可选：列间距 */
  column-gap: 40px;
}
li {
  /* 防止单个li被拆分到不同列 */
  break-inside: avoid;
}

核心逻辑是通过多列布局的自动填充规则，优先填满第一列的5个位置后再填充下一列。

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