What it is: besides calc(), min(), max() and clamp(), CSS now has functions for rounding, remainders and trigonometry. They help with consistent spacing, repeating patterns and circular layouts.

round: snap a value to a step

Syntax: the strategy, the value and the interval. Strategies are nearest, up, down and to-zero.

css">.lotgrafix-box {
    width: round( nearest, 100%, 50px );
    height: round( up, 33.3vh, 10px );
}

The width is always a multiple of 50px, which avoids blurry half-pixel edges and keeps elements on a grid.

mod and rem: remainder of a division

.lotgrafix-item {
    --lotgrafix-index: 7;
    /* 7 divided by 3 leaves 1 */
    --lotgrafix-position: mod( var( --lotgrafix-index ), 3 );
}

• mod(): the result has the sign of the divisor.
• rem(): the result has the sign of the dividend.

sin and cos: circular layouts

Place items around a circle without JavaScript. Set an angle on each item and use the functions to calculate the position.

<div class="lotgrafix-circle">
    <span style="--lotgrafix-angle: 0deg">1</span>
    <span style="--lotgrafix-angle: 90deg">2</span>
    <span style="--lotgrafix-angle: 180deg">3</span>
    <span style="--lotgrafix-angle: 270deg">4</span>
</div>

.lotgrafix-circle {
    position: relative;
    width: 300px;
    height: 300px;
}

.lotgrafix-circle span {
    position: absolute;
    left: calc( 50% + cos( var( --lotgrafix-angle ) ) * 120px );
    top: calc( 50% + sin( var( --lotgrafix-angle ) ) * 120px );
    translate: -50% -50%;
}

Other functions

• pow() and sqrt(): powers and square roots.
• hypot(): the length of a diagonal.
• tan(), asin(), acos(), atan() and atan2(): more trigonometry.
• log() and exp(): logarithms and exponentials.

Support note

These functions work in current versions of all major browsers. For older ones, provide a simple fixed value before the line that uses them.