rem() | CSS-Tricks

The CSS rem() function (also called the “remainder” function) returns the amount left over after the first argument’s integer is divided by the second argument. It does what the remainder operator (%) does in JavaScript (e.g., 10 % 4), but it’s also equivalent to a - (Math.floor(a / b) * b).

With “regular” division, if we were to divide 10 by 4, we’d end up with 2.5 (4 * 2.5 = 10). However, with integer division, it’s like asking a completely different question: “How many whole 4 integers fit into 10?” The answer is two, of course, as we can’t quite fit another 4 in there, but after fitting two 4s into the 10 (2 * 4 = 8), we’re left with a remainder of 2 (10 - 8 = 2). The rem() function returns this remainder.

Let’s try another one: how many 1s fit into 10? Exactly ten, so there is no remainder. Another one: how many 11s fit into 10? Zero, so the remainder is 10, since we’re left with all of what we started with.

/* Returns 2px */
width: rem(10px, 4px);

/* Returns -2px */
width: rem(-10px, 4px);

/* Returns 0px */
width: rem(10px, 1px);

/* Returns 10px */
width: rem(10px, 11px);

Syntax

rem(dividend, divisor)

Arguments

dividend: Integer-divide this…
divisor: …by this

Both arguments must be a <number>, <percentage>, or <dimension> (i.e., any number with units attached). They must also be of the same data type (e.g., both a <number>). If the data type is <dimension>, both arguments must be of the same dimension type (e.g., both a <length>), although they can have different units (e.g., width: rem(10px, 4vw)).

Note: If the dividend is positive, the return value will be positive, too (the divisor has no impact on positivity/negativity). For the mod() function, it’s the opposite — positivity/negativity is determined by the divisor.

Basic usage

/* Returns 2px */
width: rem(10px, 4px);

/* Returns -2px */
width: rem(-10px, 4px);

/* Returns 0px */
width: rem(10px, 1px);

/* Returns 10px */
width: rem(10px, 11px);

/* Different properties and units */
line-height: rem(10, 4); /* Numbers */
margin: rem(10%, 4%); /* Percentages */
width: rem(10px, 4px); /* Dimensions */

/* Mixed units (must be of the same dimension type) */
width: rem(10px, 4vw); /* Both units are <length> types */

/* With fractional arguments */
width: rem(10.10px, 4.4px); /* Returns 1.299999998px */

/* With calculations */
width: rem(10px * 2, 4px / 2);/* Returns 0px */

/* With CSS variables */
width: rem(var(--dividend), var(--divisor));

Example

In the example below, we have a container that’s 500px wide. But, its columns are 110px wide, which means that we can only squeeze in four of them. The red column fills the remaining space (60px) by integer-dividing those two widths (width: rem(500px, 110px)).

Specification

The rem() function is defined in the CSS Values and Units Module Level 4 specification, which is currently in Editor’s Draft status.

Browser support

rem() works in all major browsers.

That being said, we can detect browser support for it if needed:

@supports (width: rem(0px, 0px)) {
  /* rem() supported */
}

@supports not (width: rem(0px, 0px)) {
  /* rem() not supported */
}

The same thing in JavaScript:

if (CSS.supports("width: rem(0px, 0px)")) {
  /* rem() supported */
}

if (!CSS.supports("width: rem(0px, 0px)")) {
  /* rem() not supported */
}