{}
Learn web design and development
Free interactive courses
← Back to CSS
60

CSS math functions: `calc()`, `min()`, `max()` and `clamp()`

Learn how to build fluid layouts and typography without hacks by using CSS native math functions.

How much do you know about CSS?

📘 Theory

When to use each function

Each function solves a different design constraint.

  • `calc()`: operations between compatible units.
  • `min()`: choose the smaller value.
  • `max()`: choose the larger value.
  • `clamp(min, ideal, max)`: a fluid value with safe limits.

Fluid layouts without awkward jumps

Combine these functions to control width, spacing and typography with more intent.

1

A common pattern is to limit width with `min()`, create proportional spacing with `clamp()`, and reserve structural gaps with `calc()`.

2

That keeps the visual rhythm more stable across phones, tablets and desktop screens without splitting the CSS into too many branches.

🧪 Learn by doing

Example Interactive demo: scale with `clamp()` Adjust the viewport and see how the title size and padding stay fluid while remaining controlled.
⌄

🏁 Challenges

Challenge Challenge: fluid height with safe limits Set the hero height with `clamp()`.
⌄

🧰 Resources

Useful links

MDN - calc() MDN - clamp() MDN - min() MDN - max()
Test

Check your knowledge with a test about CSS.

Test for CSS
Course resources 78
📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets
‹
Lesson 59
CSS compatibility: support, prefixes and strategy
Lesson 61
Logic in CSS: the `if()` function and style queries
›

What is this?

I'm Cristian Eslava and I sometimes build websites so both you and I can learn and experiment. culTest

I made this in February 2026 to make learning easier for my students. The idea is to learn web development by practicing and to keep expanding the project with new topics, tests and challenges.

It draws inspiration from MDN, W3Schools, CodePen, Manz and many other web development references. I wanted to combine useful theory, runnable examples, challenges and the testing system I had already built for culTest. culTest

If you liked it, if you didn't, or if you want to get in touch, write to me at cristianeslava@gmail.com