Fluid Sizing with clamp(), min(), max()

## The function in one line `clamp()` is a CSS math function that takes three comma-separated arguments and returns a single value. The order is fixed: **minimum, preferred, maximum**. The specification defines the result as `max(MIN, min(PREFERRED, MAX))` — first the preferred value is capped at the maximum, then that result is floored at the minimum. Read in plain language: *"use the preferred value, but never let it drop below MIN or rise above MAX."* ## Working through a real evaluation ```css h1 { font-size: clamp(1.5rem, 4vw, 3rem); } ``` Assume the root font-size is the browser default of 16px, so `1.5rem` is 24px and `3rem` is 48px. - Viewport 320px wide: `4vw` = 12.8px. That is below the 24px floor, so the used value is **24px**. - Viewport 800px wide: `4vw` = 32px, which sits between the bounds, so the used value is **32px**. - Viewport 1600px wide: `4vw` = 64px, above the 48px ceiling, so the used value is **48px**. Between roughly 600px and 1200px of viewport width the heading grows continuously — one pixel of viewport gives 0.04px of type — and outside that band it is pinned. There is no jump anywhere, which is the visible difference from a breakpoint-stepped scale. ## Where you can write it `clamp()` is a value, not a property, so it works anywhere the property accepts a `<length>`, `<percentage>`, `<number>`, `<angle>`, `<time>` or `<frequency>`: ```css .card { padding: clamp(1rem, 3vw, 2.5rem); } .stack { gap: clamp(0.5rem, 2vw, 1.5rem); } .wrapper { width: clamp(20rem, 90%, 70rem); } .grid { grid-template-columns: repeat(3, clamp(8rem, 20%, 16rem)); } .body-copy { line-height: clamp(1.4, 1.2 + 0.5vw, 1.7); } ``` It cannot stand in for a keyword — you cannot `clamp()` your way between `block` and `flex`, and it cannot change *which* declarations apply. It interpolates one number; a media query or container query changes the rules themselves. That distinction is worth saying out loud in an interview, because it is the honest boundary of the technique. ## The arguments are full math expressions Each of the three arguments is parsed as a calculation, so you may write arithmetic directly without wrapping it in `calc()`: ```css h2 { font-size: clamp(1.25rem, 1rem + 1.5vw, 2rem); } ``` Mixing a `rem` term with a `vw` term in the preferred value is the standard idiom for fluid type: the `rem` part keeps the value tied to the reader's root font-size, the `vw` part supplies the scaling. ## Common mistakes **Wrong argument order.** `clamp(1.5rem, 3rem, 4vw)` reads plausibly as "min, max, preferred" but it means something else entirely: the preferred value here is the constant `3rem`, and `4vw` is the ceiling, so on a narrow screen the ceiling drags the size down to a few pixels. The preferred, varying value always goes in the middle. **Min greater than max.** `width: clamp(300px, 50%, 200px)` is not an error and the browser does not ignore it. Because the definition applies `min()` first and `max()` last, the minimum wins outright and the used width is 300px. This turns into a silent bug when the bounds come from custom properties set in different places. **Assuming it removes the need for any media query.** Fluid values solve *sizing*; they do not reflow a three-column grid into one column. Real responsive work usually uses both. **Bounds in px.** Writing `clamp(16px, 4vw, 32px)` freezes the floor and ceiling against the reader's font-size preference. Prefer `rem` for the bounds. ## Why interviewers ask it It is the shortest question that reveals whether a candidate thinks about sizing as a continuous function of the viewport or as a set of discrete states. A strong answer names the `max(MIN, min(VAL, MAX))` equivalence, gives one worked evaluation, and mentions that the bounds should be expressed in `rem` so the result still honours user preferences.