配了八年取整运算，每次网格宽度都要靠 JS 硬算——今天 CSS 的 round() + mod() + rem() 把这件事彻底原生化了

做响应式网格的时候，你有没有遇到过这个场景：设计稿要宽度自动吸附到 50px 的整数倍，容器 375px 宽要去掉边距后取最接近的 50 的倍数。以前这套逻辑必须写 JS，监听 resize 算一遍，ResizeObserver 再算一遍，写法繁琐性能还差。

现在 CSS 自己会了：

.card {
  /* 宽度自动吸附到 50px 的整数倍，向下取整 */
  width: round(down, calc(100vw - 32px), 50px);
}

这就是 round() 函数，Baseline 2024，Chrome/Firefox/Safari 全部支持。四个取整策略：up/ceil、down/floor、nearest/round、to-zero/trunc——对应 JS 里 Math.ceil/floor/round/trunc 四个经典方法，只是现在跑在 CSS 引擎里。

MDN 文档里有完整的行为说明。举几个实际场景：

弹性网格吸附：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, round(down, minmax(120px, 1fr), 12px));
}

字体大小阶梯化：

h1 { font-size: round(nearest, calc(16px + 4vw), 4px); }
h2 { font-size: round(nearest, calc(14px + 3vw), 4px); }

间距取整对齐：

.card {
  padding: round(to-zero, calc(8px + 2vw), 8px);
}

再看 mod() 和 rem()，两个都做取余，但符号规则不一样——这个坑 JS 里有，CSS 里同样有。

MDN 文档说清楚了：mod(a, b) 的结果跟除数 b 同号，rem(a, b) 的结果跟被除数 a 同号。CSS 代码里：

/* mod(21, -4) → -3（跟除数 -4 同号）*/
/* rem(21, -4) → 3（跟被除数 21 同号）*/

这个区别在处理负数间距、负数偏移量的时候特别有用。比如做环形进度条，从 -90deg 转到 270deg，用 mod() 归一化角度：

.progress {
  --raw-angle: calc(var(--progress) * 3.6deg); /* 0-360 → 0-1296deg */
  --angle: mod(var(--raw-angle), 360deg);       /* 归一化到 0-360 */
  transform: rotate(var(--angle));
}

实际工程里，round() 最常见的用法是替代那些「算好了再四舍五入」的 JS 逻辑。web.dev 官方博客把三角函数和 round/mod/rem 放在同一批 CSS 新函数里介绍，核心观点是：CSS 数学能力在 2024 年已经进入下一个阶段，从「只能做简单加减」进化到「能处理工程级别的数学计算」。

下一步：打开 Chrome DevTools，在 Elements 面板里直接试 round() 和 mod()，感受一下浏览器原生数学函数的精度和性能。你会发现以前要写一堆工具函数才能处理的取整逻辑，现在三行 CSS 就够了。