CSS clamp(): Fluid Sizing in One Line
The CSS clamp() function sets a value that scales between a minimum and maximum, like a thermostat for CSS properties. It's ideal for fluid typography, letting font-size grow with the viewport but not beyond set limits.
Why it exists
Before clamp(), creating fluid typography that scaled with the viewport but had lower and upper bounds required multiple, verbose media queries. This was hard to maintain and led to discrete jumps in size rather than smooth scaling. clamp() was created to solve this common responsive design pattern in a single, declarative function.
The mental model
Think of clamp() as setting guardrails for a CSS value. You define a 'preferred' value, often one that scales with the viewport like 5vw. Then you set a floor (MIN) and a ceiling (MAX). As the viewport changes, the preferred value is used, but only as long as it stays between the floor and ceiling. If it tries to go below the floor, it gets 'clamped' to the minimum. If it tries to go above the ceiling, it's clamped to the maximum.
How it works
The function takes three arguments: clamp(MIN, PREFERRED, MAX). The browser first evaluates the PREFERRED value. It then compares this result to MIN and MAX. The final applied value is effectively max(MIN, min(PREFERRED, MAX)). For example, in font-size: clamp(16px, 5vw, 32px), the browser calculates 5vw. If that result is 14px, it's less than MIN, so 16px is used. If it's 40px, it's greater than MAX, so 32px is used. If it's 22px, it's between the two, so 22px is used.
When to use it
Use clamp() for any property where you want smooth, fluid scaling between two fixed points. Its primary use case is for fluid typography (font-size). It's also excellent for responsive layouts, controlling width, padding, or margin to adapt smoothly to screen size without discrete jumps from media query breakpoints.
When not to use it
Don't use clamp() when you need to make significant layout changes at specific breakpoints, like changing a display property or reordering elements; those situations still require media queries. Also, if your preferred value is not dynamic (e.g., clamp(10px, 20px, 30px)), the function is overly complex and will always resolve to the static preferred value. It's designed for a dynamic preferred value.
One canonical example
To create a headline font size that scales with the viewport but never gets too small or too large, you would write: h1 { font-size: clamp(1.5rem, 5vw, 3rem); }. This tells the browser: 'I want the font size to be 5% of the viewport width, but don't let it go below 1.5rem on small screens or above 3rem on large screens.' This achieves fluid typography in one line.
Interview question
What is the main benefit of using the CSS clamp() function for responsive design?
- a.It guarantees that a dynamic preferred value will always be applied, overriding any fixed limits.
- b.It provides a single-line solution for smoothly scaling a CSS property between a minimum and maximum value.Correct
- c.It allows for defining multiple distinct property values based on different viewport ranges.
- d.It enables precise control over element positioning and display properties at specific breakpoints.
Why? this is the answer
The correct answer (B) highlights clamp()'s primary benefit: providing smooth, fluid scaling of a CSS property within defined minimum and maximum values. Options A and C describe the functionality of traditional media queries for discrete changes, while D incorrectly suggests clamp() overrides its own limits.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles