Math Functions in CSS

CSS math functions allow you to perform calculations directly within your CSS code, enabling more dynamic and flexible styling.

These functions include calc(), min(), max(), clamp(), round(), mod(), rem(), and sign(). 

calc()

The calc() function lets you perform calculations to determine CSS property values. It’s useful for combining different units or making properties responsive.

<style>
.box {
  width: calc(100% - 50px);
  height: 100px;
  background-color: lightblue;
  margin: 25px;
}
</style>
<div class="box">Box with dynamic width using calc()</div>

the width of the .box is calculated as 100% - 50px, meaning it will always be 50px less than the full width of its container.

min()

The min() function returns the smallest value from a list of comma-separated expressions.

This is useful for setting limits based on the smallest of multiple criteria.

<style>
.box {
  width: min(50%, 300px);
  height: 100px;
  background-color: lightcoral;
}
</style>
<div class="box">Box with min() width</div>

the width of the .box is the smaller of either 50% of its container or 300px.

max()

The max() function returns the largest value from a list of comma-separated expressions.

It's useful for ensuring a property value doesn’t drop below a certain threshold.

<style>
.box {
  width: max(50%, 300px);
  height: 100px;
  background-color: lightgreen;
}
</style>
<div class="box">Box with max() width</div>

the width of the .box is the larger of either 50% of its container or 300px.

clamp()

The clamp() function clamps a value between an upper and lower bound.

It takes three parameters: a minimum value, a preferred value, and a maximum value.

<style>
.box {
  width: clamp(200px, 50%, 400px);
  height: 100px;
  background-color: lightgoldenrodyellow;
}
</style>
<div class="box">Box with clamp() width</div>

the width of the .box is clamped between 200px (minimum), 50% (preferred), and 400px (maximum).

round()

The round() function rounds a value to the nearest integer or a specified number of decimal places.

<style>
.box {
  width: round(33.333%, 2);
  height: 100px;
  background-color: lightpink;
}
</style>
<div class="box">Box with round() width</div>

the width is rounded to two decimal places, so it would be approximately 33.33%.

mod()

The mod() function returns the remainder of the division of two numbers (modulus).

<style>
.box {
  width: calc(mod(15, 4) * 50px); /* 15 % 4 = 3 */
  height: 100px;
  background-color: lightsteelblue;
}
</style>
<div class="box">Box with mod() width</div>

mod(15, 4) gives 3 (the remainder), so the width of the .box is 3 * 50px = 150px.

rem()

The rem() function returns the remainder of a number when divided by another number.

<style>
.box {
  width: rem(20, 6); /* 20 % 6 = 2 */
  height: 100px;
  background-color: lightcoral;
}
</style>
<div class="box">Box with rem() width</div>

This example would give the width as 2px because 20 % 6 equals 2.

sign()

The sign() function returns the sign of a number: -1 for negative, 1 for positive, and 0 for zero.

<style>
.box {
  width: calc(sign(-10) * 100px); /* sign(-10) returns -1 */
  height: 100px;
  background-color: lightseagreen;
  direction: rtl; /* Flip content direction */
}
</style>
<div class="box">Box with sign() width</div>

In this case, the width would be calculated as -1 * 100px = -100px, effectively flipping the box or causing the direction to change, depending on the context.

Conclusion

CSS math functions add a powerful layer of flexibility to web design, enabling dynamic calculations and responsive layouts without relying solely on JavaScript.

Each of these functions serves a specific purpose and can be combined to achieve complex layout requirements.