如何用纯 CSS 实现列表自动分栏：无需额外 div 容器

使用 CSS columns 属性可原生、语义化地将无序或有序列表分割为多列，无需嵌套 div 或依赖 Bootstrap 网格，兼顾简洁性、可维护性与响应式潜力。

使用 css `columns` 属性可原生、语义化地将无序或有序列表分割为多列，无需嵌套 `div` 或依赖 bootstrap 网格，兼顾简洁性、可维护性与响应式潜力。

在构建导航菜单、分类标签墙或长列表展示时，常需将 <ul> 中的 <li> 项均匀分布为多列（如 4 列）。传统做法（如你示例中用 Bootstrap .row/.col 包裹 li）虽可行，但存在明显问题：

• 违反 HTML 语义——<li> 的合法父元素只能是 <ul> 或 <ol>，在其中插入 <div class="col"> 会破坏 DOM 结构合法性；
• 增加冗余标记，降低可访问性（屏幕阅读器可能无法正确解析嵌套关系）；
• 维护成本高，动态增删列表项时需手动调整列容器。

推荐方案：CSS 多列布局（Multi-column Layout）
只需一行 CSS，即可让浏览器自动将连续的 <li> 流式分配到指定列数中：

.list-group {  columns: 4; /* 指定列数 */  column-gap: 1.5rem; /* 可选：列间距 */  column-rule: 1px solid #e9ecef; /* 可选：列间分隔线 */}

对应 HTML 保持语义纯净：

<div class="grid">  <ul class="list-group">    <li class="list-group-item">1</li>    <li class="list-group-item">2</li>    <li class="list-group-item">3</li>    <li class="list-group-item">1</li>    <li class="list-group-item">2f</li>    <li class="list-group-item">3</li>    <li class="list-group-item">1</li>    <li class="list-group-item">2</li>    <li class="list-group-item">1</li>    <li class="list-group-item">2</li>  </ul></div>

✅ 优势显著：

• 零结构侵入：不添加任何非语义 div，完全保留标准 <ul><li> 结构；
• 自动平衡：浏览器按内容高度智能分配项目，避免人工拆分导致的列高差异；
• 天然响应式：配合 column-count 与 column-width（如 columns: 15em），可实现“最小宽度优先”的流式列数自适应；
• 广泛支持：Chrome 50+、Firefox 52+、Safari 10.1+、Edge 79+ 均已原生支持。

⚠️ 注意事项：

立即学习“前端免费学习笔记（深入）”；

• columns 是高度驱动型布局（按列高均衡分配），若需严格按顺序“每列 N 项”（如前两列各 3 项，后两列各 2 项），则应改用 CSS Grid + nth-child() 定位：

  .list-group {  display: grid;  grid-template-columns: repeat(4, 1fr);  gap: 0.5rem;}/* 若需精确控制每列项数，可用 :nth-child(an+b) 分组 */

• 避免在 <ul> 内混用其他元素（如 <div>），否则会破坏 columns 渲染逻辑；
• 如需支持旧版 IE，仍需降级为 Flex/Grid 方案（但现代项目通常无需兼容 IE）。

总结：columns 是解决“语义化列表分栏”最轻量、最合规的方案。它不是替代 Grid 或 Flex 的万能解法，但在纯内容流式分栏场景下，它是更优雅、更符合 Web 标准的选择。