columns 属性仅能模拟瀑布流视觉效果，其按文本流切片填列而非动态分配，导致图片截断、导航与阅读顺序错乱、懒加载不重排；适用静态文字内容，需加 break-inside: avoid 防卡片截断，并用 column-width 实现自适应列数，避开 column-count 冲突、无宽容器退化、缺失 column-gap 坍缩等陷阱。
columns 属性不是“真瀑布流”，但能模拟视觉效果
它不按列高动态分配元素，而是把整个子内容流当作文本一样切片填满各列——DOM顺序是 1→2→3→4，视觉上却变成左列堆满再填右列。这意味着：图片可能被截断、键盘导航顺序和屏幕阅读器看到的顺序不一致、懒加载后高度变化不会触发重排。它适合静态文字摘要、词典条目这类无交互、高度可预估的内容，不适合卡片式瀑布流。
必须加 break-inside: avoid 防止卡片被截断
这是最常翻车的点。没加这句，浏览器会把一个 div 卡片硬生生切成两半，上下部分分属不同列。Tailwind 默认不提供对应类，得手动加：
- 在子项上写
break-inside: avoid - Firefox 要补
-moz-break-inside: avoid - iOS Safari 13 及更早要补
-webkit-column-break-inside: avoid - 还建议加
page-break-inside: avoid，否则 Firefox 下仍可能失效
用 column-width 而非 column-count 实现自适应列数
column-width: 300px 是关键——它不是固定列宽，而是“最小期望宽度”。浏览器会尝试不同列数（1 列、2 列……），选出能在容器内放下、且列宽 ≥ 300px 的最大列数。缩放或响应式时自动调整，无需媒体查询。
必须避开的坑：
- 别同时写
column-count和column-width，两者冲突，resize 时容易闪动错列 - 别用
columns: 300px auto，column-count: auto是非法值，部分浏览器静默忽略整条声明 - 父容器必须有明确宽度（
width、max-width或嵌套在 flex/grid 子项中），否则退化为单列 - 必须配
column-gap（哪怕只设1px），否则窄屏下极易坍缩成单列
卡片样式有硬性约束，越界就失效
一旦破坏文档流，columns 就从省事方案变成排查黑洞：
- 子项必须是块级元素（
display: block或inline-block），不能是flex、grid、absolute、float - 别给卡片设固定
height，会导致列高严重不均衡；可用min-h-[200px]兜底 - 图片必须设
display: block，否则底部空白干扰行高计算 - 禁用
transform、position: relative套绝对定位子元素——这些都会让浏览器“看不见”真实高度
真正难的不是写对那几行 CSS，而是守住这些边界。稍一越界，columns 就不再可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
