CSS Clamp, Min and Max

Create fluid typography and dimensions using math functions.

❮ Previous Next ❯

CSS mathematical functions allow dynamic values without media queries:

clamp(min, preferred, max): Restricts a value between an upper and lower bound.
min(v1, v2): Selects the smallest value.
max(v1, v2): Selects the largest value.

Key Takeaways: CSS Clamp, Min and Max

Mastering CSS Clamp, Min and Max helps you write clean and reliable CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

CSS Clamp, Min and Max Code Example

CSS

h1 {
  font-size: clamp(1.5rem, 4vw + 1rem, 3.5rem);
}

Output

Heading font scales smoothly between 1.5rem and 3.5rem

Free sign-in required · Google login available

Finished this lesson?

Mark it complete to track your progress.

❮ Previous

CSS Container Queries

Next ❯

CSS Counters

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services

CSS Clamp, Min and Max

💡 Key Takeaways: CSS Clamp, Min and Max

CSS Clamp, Min and Max Code Example

Key Takeaways: CSS Clamp, Min and Max