CSS Math Functions


🔹 What Are CSS Math Functions?

CSS Math Functions allow you to perform dynamic calculations inside your CSS properties. These functions help build responsive, scalable, and conditional layouts.

Commonly used math functions:

  • calc()

  • min()

  • max()

  • clamp()


🔸 1. calc() – Calculate Dynamic Values

width: calc(100% - 60px);

Used to subtract, add, multiply, or divide values dynamically.

Supported operations:

  • + (addition)

  • - (subtraction)

  • * (multiplication)

  • / (division)


🔸 2. min() – Choose the Smallest Value

width: min(100%, 500px);

Chooses the smallest value between the two.


🔸 3. max() – Choose the Largest Value

height: max(200px, 50vh);

Chooses the largest value between the two.


🔸 4. clamp() – Set Minimum, Preferred, and Maximum

font-size: clamp(14px, 2vw, 24px);

Resizes between a minimum, preferred, and maximum range.


🔸 Why Use Math Functions?

✅ Makes layout flexible
✅ Avoids hardcoding media queries
✅ Enables better responsiveness
✅ Cleaner and dynamic styling logic


🔸 Example

.container {
  width: calc(100% - 2rem);
  padding: clamp(1rem, 2vw, 3rem);
  font-size: min(5vw, 20px);
}

Practice Questions

Q1. Set a container width to 100% - 200px using calc().

Q2. Use min() to limit image width between 100% and 300px.

Q3. Use max() to ensure card height is at least 50vh.

Q4. Apply clamp() to font-size from 12px to 24px.

Q5. Add padding using calc(2em + 10px).

Q6. Use calc() to center a div horizontally with margin.

Q7. Create a sidebar using width: calc(30% + 100px).

Q8. Use min() in a responsive grid layout.

Q9. Set margin using clamp() to make it responsive.

Q10. Multiply value using calc(2 * 1em) for line-height.


Go Back Top