column-width 比 column-count 更适合自适应列数，因其设定最小列宽并由浏览器自动计算最大可行列数，无需媒体查询或JS；需配 column-gap、column-fill、明确父容器宽度及 break-inside: avoid 等防护措施。
column-width 比 column-count 更适合自适应列数
直接写 column-count: 2 或媒体查询切列数，看似可控，实则在小屏下极易导致列过窄、文字挤成一团，或大屏下留白严重。真正能响应容器宽度自动算列数的，是 column-width —— 它设的是“最小期望列宽”，不是固定列数。
浏览器会尝试不同列数（1 列、2 列、3 列……），选出能在容器内放下、且每列宽度 ≥ 你设定值的最大列数。这个过程完全自动，无需 JS，也不依赖屏幕尺寸断点。
-
column-width: 300px+ 容器宽 800px → 实际列宽约 385px，列数为 2 - 容器缩到 500px → 列宽约 485px，列数退为 1
- 容器宽 1200px → 可能分出 3 列，每列宽约 380px
必须配 column-gap: 16px（哪怕只设 1px），否则 Safari 在窄屏下容易坍缩成单列；column-fill: auto 要显式声明并加 -webkit-column-fill: auto，Safari 14.1 前有 bug。
父容器必须有明确宽度约束，否则 column-width 失效
column-width 不是孤立生效的：它需要一个可测量的上下文。如果父容器没设 width、max-width，或处于无约束 flex/grid 子项中（比如 flex: 1 但没给祖先设宽），浏览器无法计算“多少列能塞进这个空间”，结果就是退化为单列——连 warning 都不报。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
max-width: 1200px+margin: 0 auto控制主体宽度 - 在 flex 布局中，确保该容器的 flex 父项已设明确
width或flex-basis - 绝对不要用
width: 100vw，它包含滚动条宽度，resize 时易抖动 - 禁用
columns: 300px auto缩写，column-count: auto是非法值，部分浏览器静默忽略整条声明
break-inside: avoid 必须加，且要兼容老浏览器
卡片被截断（标题在左列、图片掉进右列底部）是最常见翻车点。根本原因是 column-width 把整个容器当作文本段落切片，不加防护就会在任意位置“折行”。
- 给每个卡片元素（如
.card、article）加break-inside: avoid - Firefox 下仅此不够，必须补
page-break-inside: avoid - iOS Safari 旧版本需加
-webkit-column-break-inside: avoid - 卡片必须是块级元素（
div默认满足），不能是inline-block、float或position: absolute，否则脱离文档流，列切分失效
别混用 column-count 和 column-width，也别用 calc() 算列宽
两者语义冲突：column-width 是“让浏览器自己算列数”，column-count 是“我指定列数”。同时写，行为不可预测：resize 过程中可能闪动、错列，尤其在 iOS Safari 中。
更危险的是用 CSS 变量或 calc() 动态算 column-width 值，比如 column-width: calc(100% / 3) —— 浏览器不支持这种表达式，会直接忽略整条声明，退化为单列。
- 想响应式调整倾向？用媒体查询改
column-width值，例如：@media (max-width: 768px) { .container { column-width: 220px; } } - 列数不宜超过 4，移动端建议 ≤2，否则卡片内容过窄，图文比例失调
- 图片必须设
img { width: 100%; height: auto; display: block; }，否则原始尺寸撑破列宽，引发错位
最难的不是写出那几行 CSS，而是守住边界：不给卡片加 transform，不塞 position: absolute 子元素，不手动干预 DOM 顺序 —— 任何脱离文档流的操作，都会让 column-width 失效。
