column-width 不能直接撑满容器宽度是因为浏览器优先按该值计算理想列宽，再根据容器宽度反推整数列数，导致剩余空白；需配合 column-gap 和 padding 微调对齐。
column-width 为什么不能直接撑满容器宽度
用 column-width 做瀑布流时，最常遇到的是卡片没填满整行、右边留白严重——这不是你 CSS 写错了，是 column-count 和 column-width 的优先级机制在起作用。浏览器会先按 column-width 算出“理想列宽”，再根据容器实际宽度反推列数，但最终列数一定是整数，所以总会剩点空间。
解决思路不是硬调 column-width，而是配合 column-gap 和容器 padding 微调视觉对齐：
- 把
column-gap设为固定值（比如1rem），避免间隙随缩放浮动 - 容器左右
padding设为column-gap / 2，让第一列左边缘和最后一列右边缘对齐视口 - 不设
column-count，否则会覆盖column-width的自动计算逻辑
CSS 瀑布流里卡片高度不一致导致错位
这是 column-width 布局最典型的副作用：卡片高度差异大时，某列提前结束，后续内容从顶部开始新列，造成“断层”。它不像 JavaScript 瀑布流能动态分配高度，纯 CSS 没有跨列平衡能力。
能做的只有收敛高度波动范围：
- 给卡片统一最小高度（
min-height），比如min-height: 200px，减少过短卡片拖垮列高 - 图片用
object-fit: cover+ 固定宽高比容器，避免加载中空白或拉伸破坏列节奏 - 文字截断用
display: -webkit-box配合-webkit-line-clamp，防止段落长度差异过大
注意：别用 break-inside: avoid 强制卡片不折行——在多列布局里它只对分页有效，对 column 无效。
移动端下 column-width 布局突然变成单列
不是媒体查询漏写了，而是小屏幕下 column-width: 300px 这类值直接超过容器宽度，浏览器只能退化成 1 列。更麻烦的是，某些安卓 WebView 对小于容器的 column-width 计算不一致，可能多出 1px 就少一列。
稳妥做法是用相对单位 + 媒体查询双保险：
- 基础值用
column-width: 18rem（相对根字体大小，比 px 更柔韧） - 加一层
@media (max-width: 480px) { column-count: 1; }，明确锁定单列，避免浏览器猜错 - 测试时重点看 Chrome Android 和 Safari iOS 的实际列数，不要只信 DevTools 的模拟尺寸
flex 或 grid 能否替代 column-width 实现真瀑布流
不能。CSS flex 和 grid 都是“行优先”或“格子固定”的布局模型，它们无法像多列布局那样让内容自然“从上到下、从左到右”流动填充。所谓“CSS 瀑布流”，目前只有 column-* 属性族原生支持内容流式分列。
如果你看到用 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) 做的“伪瀑布流”，那只是等高卡片的网格排列，不是真正瀑布流——所有行高由最高卡片决定，视觉上是平的，不是参差的。
真正需要瀑布流效果（如小红书、Pinterest 风格），又不想用 JS，就只能接受 column-width 的限制：内容顺序是线性的，列高不均，且不支持跨列元素。
复杂点在于，它没法响应卡片内部交互（比如展开详情后高度突变），此时 layout shift 会明显，得靠 contain: layout 缓解重排影响——这点很容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
