Less无法动态计算瀑布流列宽，所有计算均为编译期静态预设；应优先使用原生column-count实现响应式多列布局，避免手动计算宽度与媒体查询失效问题。
Less 无法动态计算瀑布流列宽，所有“动态”都是编译期静态预设，靠媒体查询切换。 你写 @cols: 3 然后 width: (100% - 2 * @gap) / 3，看起来像自动算，其实编译完就是固定值；浏览器运行时根本不知道 @cols 是啥。
为什么直接用 column-count 比 Less 算宽度更靠谱
原生多列布局（column-count + column-gap）由浏览器自动分列、断行、处理内容截断，不依赖子项 DOM 顺序，也不用算 margin 或 nth-child。Less 手动算出的百分比宽度只适用于 float / inline-block 老方案，现在纯属绕路。
- 写
column-count: 3就能出三列瀑布流，column-gap: 1rem控制间隙，无需任何宽度计算 - 响应式只需在不同
@media里改column-count值，比如@media (min-width: 1024px) { column-count: 4; } - 避免手写
.item:nth-child(3n) { margin-right: 0; }—— 一旦数据顺序打乱或服务端渲染异步插入，就失效
percentage(1 / @n) 是唯一能安全生成精确百分比的 Less 函数
别用 100% / @n，它在旧版 Less 里可能原样输出为 100% / 3，浏览器不认；也别用 calc(100% / @n)，小数截断会导致 12 列加起来不足 100%，最后一列掉行。
- 正确写法：
width: percentage(1 / @n);→ 编译输出width: 33.33333333%; - 必须加括号：
percentage(1 / @n)，不能写成percentage(1) / @n（前者是函数调用，后者是除法） - 如果间隙参与计算，先转单位：
@gap: 16; width: (100% - unit(@gap, px)) / @n;，否则@gap是无单位数字，和%无法运算
媒体查询断点必须带单位，且不能依赖 .when
& when (@screen > 768px) 这类写法完全无效 —— Less 没有运行时 @screen 变量，.when 只在编译时判断变量是否等于某值，无法读取视口宽度。
立即学习“前端免费学习笔记（深入）”；
- 断点变量定义要带单位：
@sm: 576px;，引用时用@{sm}，否则@media (min-width: @sm)会编译成无效的@media (min-width: 576) - 推荐封装一个带单位校验的混入：
.media-up(@size) when (isunit(@size, px)) { @media (min-width: @size) { @content; } } - 每个断点内都要重算列宽，不能复用默认值：比如
.col-md-4在中屏是 25%，但在大屏若总列数变成 24，则需重新算percentage(4 / 24)
最容易被忽略的是：所有这些计算都发生在编译阶段，你改了 @cols 就得重新编译 Less 文件；而真正需要响应式的部分（比如列数随容器宽度实时变化），只能交给 CSS Grid 的 repeat(auto-fit, minmax(...)) 或原生 column-count 处理 —— Less 不该越界。
