column-width是自适应多列布局的核心，它设最小期望宽度（如300px），浏览器自动试算最大可行列数并反推真实列宽；需配column-gap、column-fill: auto、break-inside: avoid，且父容器须有明确宽度，禁用column-count和calc()。
直接用 column-width，别碰 column-count，也别写 calc() 或 CSS 变量去“算列宽”——浏览器自己会算，而且算得比你稳。
为什么 column-width 才是自适应的核心
column-width 不是固定列宽，而是“最小期望宽度”。浏览器拿到这个值后，会尝试不同列数（比如 1 列、2 列、3 列……），选出能在容器内放下、且列宽 ≥ 你设的值的最大列数。整个过程自动响应容器尺寸变化，无需 JS 或媒体查询干预。
- 设
column-width: 300px，容器宽 800px → 实际列宽约 385px，列数为 2 - 容器缩到 500px → 列宽约 485px，列数退为 1
- 必须搭配
column-gap（哪怕只是1px），否则窄屏下极易坍缩成单列 -
column-fill: auto是隐式默认值，但 Safari 14.1 前有 bug，建议显式写上并加前缀：-webkit-column-fill: auto
break-inside: avoid 必须加，且要配 page-break-inside: avoid
卡片被截断在两列之间，是瀑布流最常见翻车点。仅靠 break-inside: avoid 在 Firefox 下无效，必须补上 page-break-inside: avoid。
- 卡片元素必须是块级（
<div> 默认满足），不能是 <code>inline-block、float或绝对定位，否则脱离文档流，列切分失效 - 不要给卡片设固定高度（如
height: 200px），否则会撑乱列高均衡 - 如果卡片内含图片，确保
img设了display: block，避免底部空白干扰行高计算 - 想响应式调整倾向？用媒体查询切
column-width值，而不是变量：@media (max-width: 768px) { .container { column-width: 220px; } } - 父容器必须有明确宽度限制（
width、max-width，或嵌套在 flex/grid 子项中），否则column-width无参照，会退化为单列 - 不要用
columns: 300px auto缩写——它等价于column-width: 300px; column-count: auto，而column-count: auto是非法值，部分浏览器会静默忽略整条声明
别同时写 column-count 和 column-width
两者冲突，column-width 优先级更高，但浏览器行为会变得不可预测：有时按列数分，有时按列宽分，尤其在 resize 过程中容易闪动或错列。
真正难的不是写对那几行 CSS，而是守住边界：不给卡片加 transform、不塞绝对定位子元素、不手动干预 DOM 顺序。一旦越界，columns 就从“省事方案”变成“排查黑洞”。
