column-count 是实现多栏导航最简方案，需重置 li 为 block、设 column-gap，并用 column-fill: auto 避免断层；项数少时慎用三栏，优先 column-width 或 Grid 实现精准控制。
用 column-count 快速实现多栏导航对齐
直接用 CSS 多列布局最省事，column-count 是唯一需要的核心属性。它不改变 DOM 顺序，也不依赖 JavaScript，适合纯静态导航菜单（比如页脚链接、资源分类列表）。
常见错误是给 <nav></nav> 或 <ul></ul> 直接设 column-count，但忘了重置默认样式——<li> 的 display: list-item 会导致每项独占一行，实际只显示一列。
- 必须把
<li>改成display: inline-block或display: block（后者更稳） - 父容器要设
column-gap控制栏间距，否则挤在一起 - 避免在
<a></a>上设display: block后又加height，会破坏列内流式分布
.nav-links {
column-count: 3;
column-gap: 2rem;
}
.nav-links li {
display: block; /* 关键：解除 list-item 的强制换行 */
margin-bottom: 0.5rem;
}当链接文字长度差异大时，column-fill: auto 能防错位
默认 column-fill: balance 会尽量让各列高度一致，但导航链接长短不一（比如“首页” vs “关于我们 / 企业文化 / 发展历程 / 联系我们”），容易导致某列突然多出一整块空白，视觉上像“断层”。
这不是 bug，是平衡算法主动拉齐高度的结果。真实场景里，用户更在意阅读连贯性，而不是列高像素级一致。
立即学习“前端免费学习笔记（深入）”；
- 加
column-fill: auto让内容按顺序填满第一列再进第二列，自然分栏 - 配合
break-inside: avoid在<li>上，防止单个链接被切到两列 - 注意 Safari 旧版本（≤14.1）不支持
column-fill，但不影响基本分栏，只是回退到 balance 行为
响应式切换栏数时，别只靠 min-width 媒体查询
单纯用 @media (min-width: 768px) { column-count: 2 } 容易在平板横屏（≈1024px）和桌面窄窗（≈900px）之间出现“三栏变两栏再变三栏”的抖动——因为列数突变，浏览器重排时所有链接位置跳动。
本质是列数变化太生硬，没考虑内容密度。导航项少于 6 个时，三栏反而空；超过 15 个才真正需要三栏。
- 优先按项目数量控制：用
:nth-child(n+15)类选择器或 JS 动态加 class，再配媒体查询 - 或者改用
column-width（如column-width: 180px），让浏览器自动算列数，更平滑 - 避免同时设
column-count和column-width，后者会覆盖前者
Flex/Grid 替代方案？除非你真需要精确对齐每行末尾
多栏布局 ≠ 必须用 CSS columns。如果要求“每列最后一行链接底部对齐”，或者要让“热门标签”固定在第一列顶部、“联系方式”固定在最后一列底部，column-count 就做不到——它只管流式切分，不提供定位能力。
这时该切到 display: grid，用 grid-template-columns: repeat(3, 1fr) + grid-auto-flow: column 模拟列式填充，再配合 grid-row 手动指定位置。
- Grid 写法略长，但可控性高，兼容性也比 columns 好（IE11 都支持部分特性）
- Flex 不推荐：
flex-wrap: wrap配max-width虽能折行，但无法保证等高列，且无法跨列对齐 - 别为了“语义正确”硬套
<nav></nav>+<ul></ul>—— 如果只是链接集合，<div class="nav-grid"> 更干净<p>多栏导航真正的难点不在怎么分，而在“分完之后，用户扫一眼能不能立刻找到目标”。列数、间距、首字母排序、是否加 icon，这些细节的影响远大于技术选型。写完记得在 320px～1440px 区间拖动窗口看三遍，重点盯住列切换瞬间有没有链接跳闪或文字截断。</p> </div>
