column-count实现多列布局需满足三条件：容器设height/max-height、子项加break-inside: avoid、用column-gap而非margin；否则卡片截断、列数失效或间隙错乱。
能，但必须满足三个硬性条件：容器有高度约束、子项加 break-inside: avoid、列间距用 column-gap 而非 margin。 其他任何省略都会导致卡片被截断、列数失效或间隙错乱——这不是“效果不好”，而是直接崩坏。
为什么 column-count 设了却只显示一列？
浏览器对多列布局的规范很明确：当容器没有 height 或 max-height 时，它认为“空间无限”，于是退化为单列流。这不是 bug，是标准行为。
- 必须显式设置
height或max-height（哪怕只是max-height: 100vh） -
column-width不能和column-count同时设具体值，否则后者被忽略 - Flex/Grid 容器包裹子项会破坏文档流，
column-count失效——子项必须是普通块级元素（如裸<div>）
break-inside: avoid 为什么必须加在每个子项上？
不加这句，长卡片会被浏览器从中间劈开：上半截在第一列，下半截掉到第二列底部。这是 column-count 最典型的翻车现场，且无法通过父容器样式修复。
- 写法必须是
break-inside: avoid，不是avoid-column（Chrome/Firefox 不认） - 兼容旧版需补全：
-webkit-column-break-inside: avoid、-moz-break-inside: avoid、page-break-inside: avoid - 若子项是 React/Vue 组件（如
<Card>），确保该样式作用于组件最外层真实 DOM 节点，而非内部 wrapper
列间距为什么不能用 margin-bottom？
column-gap 是浏览器列分配逻辑的一部分，它参与列宽计算和高度判断；而 margin-bottom 只是增加子项自身占用高度，会导致“最短列”误判，最终列高严重不均、空隙忽大忽小。
立即学习“前端免费学习笔记（深入）”；
- 统一用
column-gap: 1.5rem（推荐 rem 或 px，避免百分比） - 子项禁止设
margin-bottom，尤其不能和column-gap混用 - 响应式切换列数时，只需改
column-count：@media (max-width: 768px) { column-count: 2; }
真正容易被忽略的是图片加载时机——如果子项含未设尺寸的 <img>，初始渲染时高度为 0，列高计算就全错了。要么预设 aspect-ratio，要么监听 load 后强制重排（纯 CSS 方案此时已无能为力）。
