CSS技术问询：如何限制UL列表中LI数量达10个后切换至下一列

嘿，这个需求用CSS就能完美搞定！先看看你想要的效果示例：

我给你两种实用的实现方法，根据你的场景选就行：

方法一：CSS Columns + 强制列中断 #

这种方法适合响应式场景，代码简单易维护：

/* 给父容器ul设置列属性 */
ul {
  columns: auto; /* 可以换成固定列数，比如columns: 3; */
  column-gap: 24px; /* 列之间的间距，按需调整 */
  list-style: none; /* 可选，去掉默认列表符号 */
  padding: 0;
}

/* 避免单个列表项被拆分到两列 */
li {
  break-inside: avoid;
  margin-bottom: 10px; /* 增加列表项之间的垂直间距 */
}

/* 每第10个列表项后强制切换到下一列 */
li:nth-child(10n) {
  break-after: column;
}

优点： #

• 响应式友好，浏览器会根据可用空间自动调整列数（如果用columns: auto的话）
• 代码简洁，不需要复杂的布局逻辑

方法二：CSS Grid 精准控制列数 #

如果需要更精准地固定每列10个元素，不受内容高度影响，用Grid布局更靠谱：

ul {
  display: grid;
  grid-template-rows: repeat(10, auto); /* 每列固定10行 */
  grid-auto-flow: column; /* 元素按列排列，填满一列后自动到下一列 */
  grid-column-gap: 24px; /* 列间距 */
  list-style: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

优点： #

• 严格保证每列10个元素，不会因为某些列表项高度不同导致列数错乱
• 布局逻辑清晰，适合需要精确控制的场景

注意事项： #

• 两种方法都兼容现代主流浏览器（Chrome、Firefox、Edge等），如果需要兼容IE的话，可能需要额外的降级处理，但现在大部分项目已经不需要考虑IE了
• 如果你的列表项高度差异很大，Grid方法可能会让列的总高度不一致，这时候Columns方法的视觉效果会更自然

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