mod()

The CSS mod() function returns the remaining “modulo” after the first argument is modulus-divided by the second argument. It’s the CSS equivalent of a - (Math.floor(a / b) * b) in JavaScript.

Ordinarily, dividing 10 by 4 equals 2.5 (because 4 * 2.5 = 10). However, with modulus division, it’s like asking: “How many whole 4s fit into 10?” The answer to that is 2, as we can’t fit a third one in there, and since 2 * 4 = 8, that leaves us with a modulo of 2 (10 - 8 = 2). The mod() function returns this modulo, which you can consider the rounded remainder.

Two more examples: where exactly ten 1s fit into 10, there wouldn’t be a modulo left over (the mod() function would return 0), and where zero 11s fit into 10, everything would be left over (the mod() function would return 10).

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

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

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

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

Syntax

rem(dividend, divisor)

Arguments

• dividend: Modulus-divide this…
• divisor: …by this

Both the dividend and divisor must be a <number>, <percentage>, or <dimension> (i.e., any number with units attached). Both must also be of the same data type (e.g., both a <dimension>). If the data type is <dimension>, both must also be of the same dimension type (e.g., both an <angle>), although it’s completely fine if they have different units (e.g., width: rem(10px, 4vw)).

Note: If the divisor is positive, the return value will also be positive (the dividend doesn’t impact the positivity/negativity of the return value). For the almost identical rem() function, it’s the exact opposite — the dividend determines positivity/negativity. This is the only difference between the two functions.

Basic usage

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

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

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

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

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

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

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

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

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

Example

Let’s say we have a container that’s 500px wide, but its columns are 110px wide. This means that we can only cram in four columns. In addition, there would be 60px of space unaccounted for. In the example below, the red column fills this space by modulus-dividing the two widths (width: mod(500px, 110px)).

<div class="container">
  <div class="column">...</div>
  <div class="column">...</div>
  <div class="column">...</div>
  <div class="column">...</div>
  <div class="mod">...</div>
</div>

.container {
  --container-width: 500px;
  --column-width: 110px;

  width: var(--container-width);
  display: flex;

  .column {
    width: var(--column-width);
  }

  .mod {
    width: mod(var(--container-width), var(--column-width));
  }
}

Browser support

mod() works in all major browsers.

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

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

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

The same thing in JavaScript:

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

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

Specification

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

Related