使用 CSS columns 属性可原生、语义化地将无序或有序列表分割为多列，避免滥用 Bootstrap 网格嵌套和非法 DOM 结构（如在 <ul> 中直接插入 <div>），兼顾响应性与可维护性。
使用 css `columns` 属性可原生、语义化地将无序或有序列表分割为多列，避免滥用 bootstrap 网格嵌套和非法 dom 结构（如在 `
- ` 中直接插入 `
- 语义合规：完全保留 <ul><li> 原始结构，符合 W3C 规范；
- 响应友好：结合 column-count 与 column-width 可实现流式列数（例如 columns: 150px; 表示最小列宽，浏览器自动计算列数）；
- 无障碍友好：屏幕阅读器按源顺序线性朗读，逻辑清晰；
- 轻量高效：零 JavaScript，纯 CSS 控制，渲染性能优异。
- columns 是“瀑布流”式分栏（内容从上到下填满第一列，再进入第二列……），不保证每列项数严格相等。若需精确控制（如每列固定 2 项），应改用 CSS Grid 并配合 nth-child() 定位：
.list-group { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; } /* 配合 JS 动态生成或服务端预处理确保总项数可被 4 整除 */ - Safari 中需添加 -webkit-columns 前缀以兼容旧版本（当前主流版本已原生支持）；
- 避免在 <ul> 内混入非 <li> 元素（如 <div>），否则会触发 HTML 解析错误，导致渲染异常。
`），兼顾响应性与可维护性。
在前端开发中，将长列表均匀分布到多列是常见需求（如导航菜单、标签云或产品分类）。但许多开发者习惯借助 Bootstrap 的 .row + .col 布局强行拆分 <li> 元素——这不仅违背 HTML 语义（<ul> 内部不应出现 <div>），还破坏了列表的可访问性（屏幕阅读器可能无法正确解析嵌套结构），更增加了冗余标记和维护成本。
推荐方案：CSS 多列布局（Multi-column Layout）
现代浏览器广泛支持的 columns 属性提供了一种简洁、标准且语义正确的解决方案：
.list-group {
columns: 4; /* 指定列数 */
column-gap: 1.5rem; /* 列间距，推荐设置以提升可读性 */
}配合干净的 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>✅ 优势说明：
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
总结：优先采用 columns 实现自然分栏；当业务强依赖“等高/等项数列”时，再考虑 Grid + 数据预处理方案。语义化、渐进增强、关注可访问性，才是现代列表布局的最佳实践。
