? CSS Math Functions

CSS math functions let you perform calculations directly in your styles, helping you build responsive, flexible, and easy-to-maintain layouts without hard-coding every value.

⚙️ calc() – combine units ? min() – smallest value ? max() – largest value ? clamp() – min / ideal / max

⚡ Quick Overview

Use calc() to add, subtract, multiply, or divide values (like %, px, rem together).
min() picks the smallest value from a list, helping prevent elements from growing too large.
max() picks the largest value from a list, preventing elements from shrinking too much.
clamp() locks a value between a minimum and maximum while still being fluid in the middle.

? Key Concepts

Responsive sizing: Combine relative units like vw and % with fixed units like px using math functions.
Fluid typography: Use clamp() to scale font sizes smoothly between a min and max size.
Safe limits: min() and max() are helpful for forcing layouts to respect boundaries on small or large screens.
Readability: Math functions reduce magic numbers and make your CSS easier to reason about.

? Syntax & Theory

Here’s the basic syntax of each function:

calc(A + B), calc(A - B), calc(A * B), calc(A / B)
min(value1, value2, ...)
max(value1, value2, ...)
clamp(min, preferred, max)

? View Code Example

/* Basic examples of CSS math functions */
.box-calc{
width:calc(100% - 50px);
}
.title-min{
font-size:min(5vw,24px);
}
.section-max{
padding:max(10px,1%);
}
.heading-clamp{
font-size:clamp(14px,2vw,18px);
}

? Code Example: Responsive Card

This example shows a simple card that uses calc(), min(), max(), and clamp() to stay readable and nicely spaced on different screens.

? View Code Example

/* Card that uses math functions for layout and typography */
.card{
width:calc(100% - 40px);
max-width:600px;
margin:0 auto;
padding:clamp(12px,3vw,24px);
font-size:clamp(14px,2vw,18px);
border-radius:12px;
background:#e0f7fa;
}
.card-title{
font-size:min(5vw,24px);
margin-bottom:max(8px,1vw);
}
.card-content{
line-height:1.6;
}

? Live Output

This box uses calc() to reduce its width, clamp() to control padding, and min() to keep the font-size responsive without becoming too large.

Resize the window and notice how the box adjusts:

The width always leaves a 40px gap using calc(100% - 40px).
The padding grows between 10px and 20px depending on viewport width.
The text grows with the viewport but stays capped at 24px.

? Function Summary Table

Function	Description	Example
`calc()`	Performs basic arithmetic (`+ - * /`) on CSS values.	`width: calc(100% - 20px)`
`min()`	Uses the smallest value from the list.	`font-size: min(3vw, 18px)`
`max()`	Uses the largest value from the list.	`padding: max(1rem, 5%)`
`clamp()`	Keeps a value between a minimum, preferred, and maximum.	`font-size: clamp(14px, 2vw, 20px)`

? Tips & Best Practices

Use clamp() for fluid typography that adapts smoothly across screen sizes.
calc() is great for mixing units (for example, % and px) in one expression.
Combine min() and max() with vw/vh to keep elements usable on very small or very large screens.
Keep expressions readable: add spaces inside calc() like calc(100% - 20px) instead of calc(100%-20px).

? Try It Yourself

Create a box with width: calc(100% - 100px) and observe how it resizes when you change the window width.
Set the padding of a section to max(10px, 2%) and test on both small and large screens.
Use clamp() to make a responsive font-size between 12px and 20px, with an ideal size based on vw.
Build a responsive header where the logo size uses min() so it never becomes too large on ultra-wide displays.