submited by

Style Pass

CSS added many new Math functions to supplement the old favorites (think calc() and the more recent clamp()). They all ultimately represent a numeric value, but the nuance in how they work is not always clear from the start. This series aims to look at each function with common use cases... and the less common as well.

The mathematical concept of a remainder comes from division, representing what remains when a number does not divide evenly into another number. For example, with 9 Ă· 4, 9 is not a multiple of 4, so 4 does not divide evenly into 9. You can add two 4s to get 8, but you still have a 1 left over to get to 9, so 1 is our remainder.

In CSS, we now have access to the rem() function to calculate a remainder. It takes two parameters, as JavaScript has two numbers to use with the remainder operator %. In mathematical terms, the first number is the dividend and the second is the divisor.

Since we are in CSS, we also have to consider units. Both parameter values need to be of the same type, such as a length or an angle representation.

Read more danielcwilso...