优先用 column-width + column-count: auto 实现响应式多列，固定列数时才用 column-count；break-inside: avoid 仅对块级元素生效且需父容器启用多列；column-fill: balance 可均衡列高，否则应考虑 Grid 替代。
多列布局用 column-count 还是 column-width？
取决于你更想控制“列数固定”还是“每列宽度固定”。column-count 强制分几列，内容会强行挤进去，可能造成某列特别短、某列特别长；column-width 是告诉浏览器“每列至少宽这么多”，实际列数由容器宽度动态决定，更适合响应式场景。
常见错误：在窄屏上设了 column-width: 200px，结果容器只有 300px 宽，硬生生撑出两列，每列只剩 150px，文字换行频繁、可读性暴跌。
- 优先用
column-width+column-count: auto（默认值），让浏览器自己算列数 - 如果必须固定列数（比如打印样式），再用
column-count，并搭配column-gap避免挤在一起 - 别忘了加
break-inside: avoid到每个数据项上，否则一个短句可能被劈成两半分在不同列
break-inside: avoid 为什么经常失效？
它只对块级元素生效，而 <span></span>、<a></a> 这类行内元素默认无视。另外，如果父容器没启用多列（即没设 column-count 或 column-width），这个声明就完全不触发。
典型现象：列表里每个短句用 <div> 包着，加了 <code>break-inside: avoid，但依然被断开——大概率是父容器用了 display: inline-block 或其他非块级显示方式，导致多列上下文没建立。
立即学习“前端免费学习笔记（深入）”；
- 确保父容器设置了
column-width或column-count - 每个数据项用
<div> 或 <code><p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11112" title="CSS工具箱(专业版)">CSS工具箱(专业版)</a> <p>全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p> </div> <a href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>，别用<span></span> - 加上
display: block双保险，尤其当它被其他样式覆盖时 - 用
column-fill: balance（默认值，多数浏览器支持）强制各列高度尽量一致 - 避免在数据项里塞
<br>或大 margin，这些会干扰流式切分逻辑 - 真要严格对齐，不如用
display: grid配合grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))，虽然失去“文本流语义”，但控制力强得多 - 短句数量少（grid 更可控
- 短句是纯文本、需打印/选中/无障碍支持 → 留用
columns，加break-inside: avoid和column-gap - 用
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))，别用auto-fill，后者会在空余空间里画一堆看不见的列轨道
长短不一的短句排布后出现大量空白列？
CSS 多列本质是“流式切分”，不是网格对齐。浏览器按文本流顺序填满第一列，再填第二列……所以如果前面几个短句特别短，后面突然来个长句，它会独占一列下半部分，导致下一列开头空一大截。
这不是 bug，是设计如此。想视觉上更均衡，得干预内容流顺序或换方案。
Flexbox 或 Grid 替代多列时要注意什么？
多列（columns）专为文本流设计，天然支持跨列标题、首字下沉等排版特性；Flexbox/Grid 是布局工具，处理纯短句卡片更稳，但得手动管理换行和响应行为。
容易被忽略的点：Grid 的 auto-fill 和 auto-fit 表现差异极大。用错一个，小屏下可能直接变成单列滚动，而不是重新排列。
多列布局真正难的不是写那三行 CSS，而是接受它不“对齐”、不“精确”、不“像素级可控”——它本质是为报纸正文服务的，拿它做卡片墙，就得随时准备妥协或换方案。
