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

许多前端开发者在处理列表的多栏布局时，第一时间想到的往往是引入 Bootstrap 的网格系统，或者手动嵌套大量 div。但这里隐藏着一个问题——为了视觉效果牺牲了 HTML 本身的语义结构。实际上，CSS 自带的 columns 属性就能简洁高效地完成这项任务。

例如，在构建导航菜单、标签云或长列表时，我们经常需要将

中的
• 均匀拆分成 4 列。传统做法是借助 Bootstrap 的 .row 和 .col 包裹每个
• ，虽然实现起来看似简单，却存在不少问题：
  • 破坏了 HTML 的语义规范——
  • 的合法父元素只能是
    或
    ，中间插入

    会直接导致 DOM 结构不合法；

    1. 标记过于冗余，屏幕阅读器可能难以正确解析这些嵌套层级，可访问性大幅降低；
    2. 后期维护也比较棘手，增删列表项时需要手动调整列容器，非常繁琐。

    推荐方案：CSS 多列布局（Multi-column Layout）

    事实上，只需一行 CSS 代码，浏览器就能自动将连续的

  • 按流式分配到指定的列数中：

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

    对应的 HTML 依然保持着语义上的纯净：

      
        
    1
        
    2
        
    3
        
    1
        
    2f
        
    3
        
    1
        
    2
        
    1
        
    2
      
    

    这个方案的优势十分明显：

    • 零结构侵入：无需添加任何非语义的 div，完全保持标准的
      • 结构；
      • 自动平衡：浏览器会根据内容高度智能分配项目，避免人工拆分导致的列高参差不齐；
      • 天然响应式：配合 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) 分组 */

      • 在
        内部不要混入其他元素（比如

        ），否则 columns 的渲染逻辑会受到影响；

        • 如果仍需兼容旧版 IE，那就只能降级使用 Flex 或 Grid 方案——不过现代项目通常已经不再考虑 IE 了。

        一句话总结：使用 columns 进行列表分栏，是最轻量、最符合语义的选择。它并非要取代 Grid 或 Flex——遇到复杂布局需求时，Grid 和 Flex 依然是更合适的工具。但在“纯内容流式分栏”这一场景下，columns 显然更加优雅，也更贴近 Web 标准的初衷。每个工具都有其最擅长的领域，关键是把砖用在正确的位置上。