column-count本质是内容流切分而非盒模型重排，将容器视为连续文本按列高自动折行，无视子元素边界；break-inside: avoid需加在语义完整子项上且依赖块级流、无flex/grid干扰，column-gap才可控列间空白，列高不可观测亦无回调。
column-count 本质是内容流切分，不是盒模型重排
它不把每个 .card 当独立盒子处理，而是把整个容器内容当作一段连续文本——浏览器按列高自动折行，完全无视子元素的 border、padding、margin 边界。你看到的“盒子被劈开”，其实是渲染引擎在列剩余空间不足时，强行把块级元素从中间截断塞进下一列。
break-inside: avoid 为什么加了还失效？
常见误操作是加错位置或忽略前提条件：
- 加在容器上（如
.grid）——无效，break-inside只对**子元素自身**生效 - 加在
<p></p>或<img>上——没用，必须加在包裹完整语义单元的父块上（如.item） - 该
.item用了display: flex或display: grid——break-inside在现代浏览器中基本失效 - 父容器设了
height或max-height——压缩内容流高度，导致避断逻辑退化为强制拆分
column-gap 和 margin-bottom 为何不叠加？
多列布局下，子元素的 margin-bottom 不会像普通文档流那样撑开列高，而是被折叠或截断；但 padding-bottom 会完整计入列内容高度。这意味着：
- 靠
margin-bottom控制卡片间距 → 列高计算失准，底部留白不可控 - 想稳定控制垂直间隙 → 改用
column-gap（列间空白）或给子项设padding-bottom -
column-gap不参与宽度计算，column-rule的宽度会挤占列宽，临界时可能意外换列
为什么不能在 Flex/Grid 容器里用 column-count？
column-count 只在块级格式化上下文（BFC）中生效。一旦父容器设了 display: flex 或 display: grid，就切换到了各自的布局上下文，column-count 直接被忽略——连解析都不会触发。
更隐蔽的问题是：某些框架（如 Tailwind）默认给容器加 display: flex，哪怕你只写了 columns-3 类，实际也毫无效果。检查 computed styles 里的 display 值，比查 CSS 规则更可靠。
真正容易被忽略的，是列高不可观测——column-count 不暴露任何列高信息，也没有 layout-complete 回调。你想知道“最后一列是否填满”或“是否已滚动到底”，只能靠遍历所有子项累加 offsetHeight + marginBottom，还得手动减去 column-gap 和容器 padding。这不是估算误差问题，是模型本身就不提供这个维度的数据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
