Skip to main content
WPFSharp Academy
Syllabus
On this page

Math Functions (calc, min, max, clamp)

Badar KhalilUpdated September 30, 2026 8 min read
Share X Facebook LinkedIn WhatsApp

CSS Math Functions: calc(), min(), max() and clamp()

Focus keyword: CSS clamp(). CSS math functions let the browser calculate values while the page is running. You can mix units, respond to the viewport and set safe limits, all without JavaScript or extra media queries. In this lesson you will learn calc(), min(), max() and clamp(), the newer round(), mod() and trigonometric functions, fluid typography, responsive containers and the mistakes that break a calculation.

CSS calc function, CSS min function, CSS max function, CSS clamp fluid typography, responsive font size clamp, clamp vs media queries, fluid spacing, calc with CSS variables, calc 100vh minus header, min(100% - 2rem, 1100px), container width min, CSS round function, CSS mod function, CSS trigonometric functions, sin cos in CSS, pow sqrt hypot, dvh and svh units, container query units cqi, typed arithmetic, fluid design without media queries.

1. Why Use CSS Math Functions?

Plain values are fixed. Math functions let you mix relative and absolute units, for example 100% - 240px, and set limits such as a font that grows with the screen but never becomes too small or too big. They reduce the number of media queries and make layouts fluid by default.

2. calc()

calc() performs addition, subtraction, multiplication and division with mixed units.

  • Spaces around + and - are required. calc(100% - 20px) is valid, calc(100%-20px) is not.
  • For multiplication, at least one side must be a number without a unit: calc(10px * 3).
  • For division, the right side must be a number: calc(100% / 3).
  • You can nest calc() and use parentheses: calc((100% - 2rem) / 3).
  • You can use variables: calc(var(--space) * 2).
  • You can add lengths and percentages in width, height, margin, padding, position offsets, font-size and more.
  • Inside other math functions you can skip the word calc: min(100% - 2rem, 1100px).

3. min()

min(a, b, ...) returns the smallest value, so it acts as a maximum limit. Example: width: min(100%, 600px) means the element is never wider than 600px but can be narrower on small screens. It replaces the old pair width: 100%; max-width: 600px;.

4. max()

max(a, b, ...) returns the largest value, so it acts as a minimum limit. Example: font-size: max(1rem, 2vw) never goes below 1rem. Another use: padding: max(1rem, env(safe-area-inset-left)) keeps space on phones with notches.

5. clamp()

clamp(minimum, preferred, maximum) holds a value between two limits. It is the same as max(minimum, min(preferred, maximum)). The preferred value is usually a mix of viewport units and a fixed unit: clamp(1rem, 0.8rem + 1vw, 1.5rem). The order matters: minimum first, preferred in the middle and maximum last.

Fluid typography that respects zoom

Never use only vw for font size, because users who zoom the page will not see the text grow, which fails accessibility rules. Always include a rem part in the preferred value, for example font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem). Also keep the maximum size at no more than about two and a half times the minimum so the text still scales with browser zoom.

Other fluid uses

  • Spacing: padding-block: clamp(2rem, 6vw, 6rem).
  • Container: width: clamp(320px, 90%, 1100px).
  • Grid columns: grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) so a column never overflows on narrow screens.
  • Gap and border radius that grow with the screen.

6. Units to Combine with Math Functions

  • rem and em: scale with font size and user settings.
  • vw and vh: viewport width and height.
  • dvh, svh, lvh: dynamic, small and large viewport height, better than vh on mobile browsers with toolbars.
  • cqi and cqw: container query units, based on the parent container size.
  • ch: width of the zero character, perfect for readable line length such as max-width: min(65ch, 100%).

7. Newer Math: round(), mod(), rem()

Modern browsers support stepped value functions.

  • round(nearest, 37px, 10px) gives 40px. Strategies are nearest, up, down and to-zero.
  • mod(17px, 5px) gives 2px and follows the sign of the divisor.
  • rem(17px, 5px) gives 2px and follows the sign of the dividend.

Use them for pixel snapping, repeating patterns and stepped sizes. Always check support and use @supports with a fallback.

8. Trigonometric and Exponential Functions

CSS also has sin(), cos(), tan(), asin(), acos(), atan(), atan2(), pow(), sqrt(), hypot(), log(), exp(), abs() and sign(). They let you place items on a circle, create wave effects and compute sizes from diagonal distances, all in CSS. Support is newer than for calc, min, max and clamp, so treat them as progressive enhancement.

9. Math with CSS Variables

Store numbers in variables and calculate the rest: --size: 4; width: calc(var(--size) * 1rem);. For a unitless number that must become a length, multiply by one unit: calc(var(--n) * 1px). Do not write var(--n)px, because it is not valid.

10. Practical Recipes

  • Full height minus header: min-height: calc(100dvh - var(--header-h)).
  • Centered container with gutters: width: min(100% - 2rem, 1100px); margin-inline: auto;.
  • Sidebar plus fluid content: width: calc(100% - 260px).
  • Equal columns with gap: width: calc((100% - 2 * 16px) / 3).
  • Responsive hero heading: font-size: clamp(2rem, 1.2rem + 3vw, 4rem).

11. Browser Support

calc(), min(), max() and clamp() are supported in all modern browsers. round(), mod(), rem() and the trigonometric functions are newer, so wrap them in @supports and place a simpler declaration before them as a fallback.

12. Common Mistakes

  • Missing spaces around + and -, for example calc(100%-20px).
  • Dividing by a value with a unit, for example calc(100% / 2px).
  • Adding a number to a length, for example calc(10px + 2).
  • Putting the arguments of clamp() in the wrong order.
  • Using only vw for font size and breaking browser zoom.
  • Using max() when you wanted min(). Remember: min() sets an upper limit, max() sets a lower limit.
  • Forgetting that percentages depend on the parent, so the result may not be what you expect in height.

Key Takeaways

Use calc() to mix units, min() to cap a value, max() to give a floor and clamp() to keep a value between both limits. Combine rem with viewport units for accessible fluid typography, use variables to keep formulas readable, and treat round(), mod() and trigonometry as progressive enhancements.

Try it Yourself HTML
Output

Press Run to execute.

Try it Yourself HTML
Output

Press Run to execute.

Try it Yourself HTML
Output

Press Run to execute.

Try it Yourself HTML
Output

Press Run to execute.

Try it Yourself HTML
Output

Press Run to execute.

Try it Yourself HTML
Output

Press Run to execute.

Try it Yourself JAVASCRIPT
Output

Press Run to execute.

Exercise: Fluid Heading and Spacing with clamp()HTML

Make the h1 grow from 2rem to 4rem and the section padding from 1rem to 4rem using clamp(). The preferred value must contain a rem part so browser zoom still works.

Try it Yourself HTML
Output

Press Run to execute.

Show expected output 
h1 uses clamp(2rem, ... rem + ... vw, 4rem) and the section padding uses clamp(1rem, ..., 4rem)

This is a self-check — compare your result with the expected output above.

Exercise: Full Height Layout Minus the HeaderHTML

The header is 64px tall. Make the main area at least as tall as the rest of the screen using calc() and dvh. Store the header height in a variable and use it in both places.

Try it Yourself HTML
Output

Press Run to execute.

Show expected output 
A --header-h variable is used for the header height and main uses min-height: calc(100dvh - var(--header-h))

This is a self-check — compare your result with the expected output above.

Was this page helpful?