最稳路径是 column-count 配合媒体查询，Less 仅用于集中管理断点与列数变量，不可用 column-width 响应式或运行时计算列数，需规避 Safari 和旧 Firefox 兼容性问题。
直接用 column-count + 媒体查询是最稳的路径，Less 本身不新增瀑布流能力，但能帮你把响应式列数切换写得更干净、可维护，同时规避 Safari 和旧 Firefox 的典型坑。
为什么不能直接在 Less 里写 column-width 响应式
column-width 看似灵活，但在 iOS Safari（尤其 15.4–16.x）中与 column-count 同时设置会失效；横竖屏切换时列数“卡住”不更新，是真实存在的兼容性断层。Less 编译不出运行时逻辑，它只是提前生成 CSS，所以指望变量插值实现“随宽度自动算列数”反而容易翻车。
实操建议：
- 放弃用
@columns: (floor((@container-width / 250px)));这类计算——浏览器不认运行时宽度，Less 也不知道视口多大 - 列数必须靠媒体查询硬切，Less 只负责组织这些断点，别让它“猜”
- 所有
column-gap统一用px单位，避免 Safari 把1rem渲染成 0 或加倍
用 Less 变量 + 媒体查询控制列数切换
把常见断点和对应列数抽成变量，既方便统一调整，又避免手写重复媒体查询。关键不是“动态”，而是“集中管理”。
立即学习“前端免费学习笔记（深入）”；
示例结构：
@breakpoint-sm: 480px;
@breakpoint-md: 768px;
@breakpoint-lg: 1024px;
@cols-sm: 1;
@cols-md: 2;
@cols-lg: 3;
.masonry {
column-count: @cols-sm;
column-gap: 16px;
@media (min-width: @breakpoint-md) {
column-count: @cols-md;
}
@media (min-width: @breakpoint-lg) {
column-count: @cols-lg;
}
}
注意点：
- 不要嵌套
@media在伪类或动画里——Less 编译后可能生成非法选择器 - 如果项目需支持旧版 Firefox（column-fill: auto;，它不支持
balance但认auto - 变量名带单位（如
@gap: 16px;）比纯数字更安全，防止被意外参与运算
break-inside: avoid 的 Less 封装陷阱
很多人封装成 .avoid-break() { break-inside: avoid; } 后全局混用，结果在 Flex/Grid 容器里也套用，反而引发布局错乱——break-inside 只对多列容器（column-count 或 column-width）生效，在其他 display 模式下是无效声明。
正确做法：
- 只在瀑布流子项上显式调用，例如：
.masonry-item { .avoid-break(); } - 避免用
break-inside: avoid包裹含img的卡片——图片加载慢时高度为 0，会导致整块被挤到下一列底部，视觉撕裂 - 若卡片含异步内容（如懒加载图），改用 JS 监听
load后强制触发重排：el.style.columnGap = '0'; el.style.columnGap = '16px';
图片卡片场景下的 Less 预处理提醒
瀑布流里最常塞的是图片卡片，但 img 默认是行内元素，且未设宽高时无法撑开列容器。Less 不能代替你写 HTML 结构，但它能帮你守住底线。
建议在基础 mixin 中强制约束：
.masonry-img() {
display: block;
width: 100%;
height: auto;
margin-bottom: 16px;
}
然后在卡片样式中组合使用：
.masonry-item img {
.masonry-img();
}
易忽略的点：
- 不要给
img设固定height，否则破坏“高度不定”这个瀑布流前提 - 如果要用
object-fit: cover，必须配合明确的容器宽高，而多列布局中容器高度不可控——此时更适合用 Grid 替代 - Safari 对
column-rule虚线支持差，Less 里别写column-rule: 1px dashed #ccc，换成solid更稳妥
真正难的从来不是写几行 Less，而是判断什么时候该放弃多列、转用 Grid 或 JS；比如需要“最短列追加新项”语义、或卡片间有复杂交互时，column-count 就只是个视觉糖衣，底层逻辑还得靠 JS 补齐。
